FormControl

Form

Abstract component that renders a form control. Unlike FormInput, this component doesn't automatically pass the value and onChange props down to the underlying element. This is so we can use it not only for native form elements but also for custom components whose value is not controlled by the native value and onChange props.

Code examples

const form = useFormStore({
  defaultValues: {
    content: "",
  },
});

const value = form.useValue(form.names.content);

<Form store={form}>
  <FormLabel name={form.names.content}>Content</FormLabel>
  <FormControl
    name={form.names.content}
    render={
      <Editor
        value={value}
        onChange={(value) => form.setValue(form.names.content, value)}
      />
    }
  />
</Form>
const form = useFormStore({
  defaultValues: {
    content: "",
  },
});

const value = form.useValue(form.names.content);

<Form store={form}>
  <FormLabel name={form.names.content}>Content</FormLabel>
  <FormControl
    name={form.names.content}
    render={
      <Editor
        value={value}
        onChange={(value) => form.setValue(form.names.content, value)}
      />
    }
  />
</Form>

Required Props

`name`

StringLike
StringLike

Field name. This can either be a string corresponding to an existing property name in the values state of the store, or a reference to a field name from the names object in the store, ensuring type safety.

Live examples

FormRadioUsing the FormRadioGroup and FormRadio components to create a Form with custom validation that requires a user to select an option from a list of radio buttons.

Form with SelectCombining Form and Select to create an accessible custom select widget that works with the browser's built-in validation and native form submission.

Optional Props

`getItem`

((props: CollectionStoreItem) => CollectionStoreItem) | undefined
((props: CollectionStoreItem) => CollectionStoreItem) | undefined

A memoized function that returns props to be passed with the item during its registration in the store.

Code examples

const getItem = useCallback((data) => ({ ...data, custom: true }), []);
<CollectionItem getItem={getItem} />
const getItem = useCallback((data) => ({ ...data, custom: true }), []);
<CollectionItem getItem={getItem} />

`id`

string | undefined
string | undefined

The unique ID of the item. This will be used to register the item in the store and for the element's id attribute. If not provided, a unique ID will be automatically generated.

Live examples

Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.

Tab with React RouterUsing React Router to create Tab links and tab panels controlled by the browser history, while maintaining keyboard navigation.

Animated TabPanelUsing plain CSS transitions to slide in and out TabPanel components as they are expanded.

Select with Combobox and TabsAbstracting Select to work alongside Combobox and Tab components, presenting a searchable, tabbed dropdown.

`render`

RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined
RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.

`shouldRegisterItem`

boolean | undefined = true
boolean | undefined = true

Whether the item should be registered as part of the collection.

`store`

FormStore<FormStoreValues> | undefined
FormStore<FormStoreValues> | undefined

Object returned by the useFormStore hook. If not provided, the closest Form or FormProvider components' context will be used.

`touchOnBlur`

BooleanOrCallback<React.FocusEvent<Element, Element>> | undefined = true
BooleanOrCallback<React.FocusEvent<Element, Element>> | undefined = true

Whether the field should be marked touched on blur.

FormControl

Live examples

Code examples

Live examples

Stay tuned