Feedback: Custom input components & Form Builder API

[kmelve]

We have shipped a new API for Form building and custom input components.

Let us know how it works for you:

• Are you able to do the customizations you want and expect to be able to do?
• Is there anything unclear?
• Is there anything that you expect to work that doesn't?
• Are there things you can do now that you couldn't do before?

[loremipson]

I know this isn't currently documented but I'm eager to get in here. I see set and unset are now part of sanity/form.

It doesn't seem like the inputComponent key is working now. Are there any examples at all yet, or should I just be patient for the docs?

[kmelve]

We'll get this up on the docs real soon!

Meanwhile: You can use defineType and defineField to get type validation and autocomplete, which might help.

import { defineType, defineField } from "sanity";
import { CustomField,CustomItem, CustomInput, CustomPreview, CustomDiff  } from '../components'

export const aDocumentType = defineType({
  name: "aDocumentType",
  title: "A Document type",
  type: "document",
  fields: [
    defineField({
      name: "aFieldType",
      type: "fieldType",
      components: { 
        field: CustomField,
        item: CustomItem,
        input: CustomInput,
        preview: CustomPreview,
        diff: CustomDiff
      },
    })
  ],
});

[sarahsweat]

@kmelve any update on the docs for things related to custom components and how to migrate existing ones?

[vincentjflorio]

I know that the page you linked is empty, but I was watching the recordings of the preview and trying to reverse engineer some of what was going on just because I can't help myself.

I managed to use the form property in the config to go after the name field from the pets example in the beta docs, read what the person is typing, and then change the value on the field based on what they typed.

The use case of my test was silly, because it just sees if you wrote more than ten characters and replaces the entire string with "Too long" but the cool part is, in just four lines of beginner-level JS it has self-patched the field value without having to write a custom input component from the top down.

I can open the JSON inspector and see that the value is safely and accurately changed.

Once you get the mechanics out of the way it starts to free you up to deep dive into the "imagination" part; I genuinely can't wait to see what passionate and experienced people can produce with this lowered barrier to entry.