FormProvider

Provides a form store to Form components.

Code examples

<FormProvider defaultValues={{ email: "" }}>
  <Form>
    <FormInput />
  </Form>
</FormProvider>
<FormProvider defaultValues={{ email: "" }}>
  <Form>
    <FormInput />
  </Form>
</FormProvider>

Optional Props

`defaultErrors`

DeepPartial<DeepMap<T, ErrorMessage>> | undefined
DeepPartial<DeepMap<T, ErrorMessage>> | undefined

The default errors of the form.

`defaultItems`

T[] | undefined = []
T[] | undefined = []

The defaut value for the items state.

`defaultTouched`

DeepPartial<DeepMap<T, boolean>> | undefined
DeepPartial<DeepMap<T, boolean>> | undefined

The default touched state of the form.

`defaultValues`

T | undefined = {}
T | undefined = {}

The default values of the form.

`errors`

DeepPartial<DeepMap<T, ErrorMessage>>
DeepPartial<DeepMap<T, ErrorMessage>>

Form errors.

`items`

T[]
T[]

Lists all items along with their metadata. This state is automatically updated when an item is registered or unregistered using the registerItem function.

`setErrors`

((errors: DeepPartial<DeepMap<T, ErrorMessage>>) => void) | undefined
((errors: DeepPartial<DeepMap<T, ErrorMessage>>) => void) | undefined

Function that will be called when the errors state changes.

Code examples

useFormStore({ setErrors: (errors) => console.log(errors) });
useFormStore({ setErrors: (errors) => console.log(errors) });

`setItems`

BivariantCallback<(items: T[]) => void> | undefined
BivariantCallback<(items: T[]) => void> | undefined

A callback that gets called when the items state changes.

Code examples

const [items, setItems] = useState([]);
const collection = useCollectionStore({ items, setItems });
const [items, setItems] = useState([]);
const collection = useCollectionStore({ items, setItems });

`setTouched`

((touched: DeepPartial<DeepMap<T, boolean>>) => void) | undefined
((touched: DeepPartial<DeepMap<T, boolean>>) => void) | undefined

Function that will be called when the touched state changes.

Code examples

useFormStore({ setTouched: (touched) => console.log(touched) });
useFormStore({ setTouched: (touched) => console.log(touched) });

`setValues`

((values: T) => void) | undefined
((values: T) => void) | undefined

Function that will be called when values state changes.

Code examples

function MyForm({ values, onChange }) {
  const form = useFormStore({ values, setValues: onChange });
}
function MyForm({ values, onChange }) {
  const form = useFormStore({ values, setValues: onChange });
}

`store`

Store<Partial<S>> | undefined
Store<Partial<S>> | undefined

Another store object that will be kept in sync with the original store.

Live examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

`touched`

DeepPartial<DeepMap<T, boolean>>
DeepPartial<DeepMap<T, boolean>>

The touched state of the form.

`values`

T = {}
T = {}

Form values.

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.

FormProvider

Code examples

Code examples

Code examples

Code examples

Live examples

Live examples

Stay tuned