form.md

title	Form
parent	Controls and forms
grand_parent	Components

Form

{: .no_toc }

The context a set of fields share - values, errors and submission.

import { Field, Form, TextInput, useForm } from '@textui/widgets';

export function Profile() {
  const form = useForm({
    initialValues: { name: '' },
    onSubmit: (values) => save(values),
  });

  return (
    <Form form={form}>
      <Field name="name" label="Name">
        <TextInput value={String(form.values.name)} onChange={(v) => form.setValue('name', v)} />
      </Field>
    </Form>
  );
}

Props

Prop	Type	Default
form	FormApi<Record<string, unknown>>	required

Plus everything on BoxProps.

Role: form.

Form carries the FormApi from useForm down to the Fields inside it, so a field can find its own error and touched state by name.

Validation runs over the whole values object rather than per field, because the rules people actually need are cross-field - a confirmation that must match a password, a date that must follow another date. Errors show after a field is touched, or after a submit attempt.

See also

• Editing keys and selection - the keys, the selection and the clipboard
• Field - one labelled input inside it
• FormActions - the submit row
• Controls and forms - validators and fieldValidators