Fieldset

An accessible fieldset wrapper with a visible legend label. Groups related form fields together with semantic HTML.

Basic Fieldset

Personal Information

First name

Last name

<Fieldset legend="Personal Information">
  <Field>
    <FieldLabel>First name</FieldLabel>
    <Input placeholder="Jane" />
  </Field>
  <Field>
    <FieldLabel>Last name</FieldLabel>
    <Input placeholder="Doe" />
  </Field>
</Fieldset>

Disabled Fieldset

Account Details

Username

<Fieldset legend="Account Details" disabled>
  <Field>
    <FieldLabel>Username</FieldLabel>
    <Input placeholder="janedoe" />
  </Field>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" placeholder="jane@example.com" />
  </Field>
</Fieldset>

API Reference

Prop	Type	Default	Description
`legend` required	`string`	—	Text displayed as the fieldset legend, providing an accessible group label.
`disabled`	`boolean`	`false`	When true, disables all form controls within the fieldset.
`className`	`string`	—	Additional CSS classes to apply to the fieldset element.
`children` required	`React.ReactNode`	—	The form fields and content grouped by this fieldset.