Skip to content
+

Fieldset

Fieldsets group multiple fields together with a label. This is a light wrapper over the native `fieldset` and `legend` elements, but makes the `legend` element easily stylable.

Account details

Installation

Base UI components are all available as a single package.

npm install @base_ui/react

Once you have the package installed, import the component.

import * as Fieldset from '@base_ui/react/Fieldset';

Anatomy

Fieldsets are composed of two components:

  • <Fieldset.Root /> renders the fieldset element.
  • <Fieldset.Legend /> renders a label for the fieldset.
<Fieldset.Root>
  <Fieldset.Legend />
</Fieldset.Root>

Usage with Fields

Field components are placed inside the Fieldset component.

<Fieldset.Root>
  <Fieldset.Legend>Account details</Fieldset.Legend>
  <Field.Root>
    <Field.Label>Name</Field.Label>
    <Field.Control />
  </Field.Root>
  <Field.Root>
    <Field.Label>Address</Field.Label>
    <Field.Control />
  </Field.Root>
  <Field.Root>
    <Field.Label>Bio</Field.Label>
    <Field.Control render={<textarea />} />
  </Field.Root>
</Fieldset.Root>