Form

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

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

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

• Field - one labelled input inside it
• FormActions - the submit row
• Controls and forms - validators and fieldValidators