Form and Fieldset

Group fields, validate them, and submit their values.

import { Form } from 'components/UI/Form'

import { Fieldset } from 'components/UI/Fieldset'

Fieldset footer

Use Fieldset.Footer for helper text or actions below the fields.

Project settings

Project name

Your team sees this name in PostHog.

Submit a form

Form validates its fields when the user submits. If all fields are valid, onFormSubmit gets the values by field name.

Errors from a server

Pass errors to Form, with each key a field name. Field.Error shows the message for that field. The message goes away when the user changes the value.

Group fields with a fieldset

Fieldset.Root draws a border around related fields. Fieldset.Legend is the title of the group. The fields go into two columns when the container is wide.

Billing address

Street

City

Postal code

Country

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Give each Field.Root a name. It is the key in the submitted values and in errors.
Fields validate on submit, then again on each change. Set validationMode to validate earlier.
Group related fields in a Fieldset. Set disabled on it to disable them all.

API

Props that the library adds. Every part also takes all the Base UI props.

Fieldset.Footer

Prop	Type	Default	Description
children	ReactNode	–	Helper text or actions below the fields. The footer renders a div with a top divider.

Fieldset.Legend

Prop	Type	Default	Description
render	ReactElement \| function	<legend />	Renders a native legend element. Base UI renders a div.