The Fieldset component groups related form fields together with an optional legend.
Installation
import { Fieldset, FieldsetLegend } from "@craftdotui/baseui/components/fieldset";
<Fieldset>
<FieldsetLegend>Personal Information</FieldsetLegend>
<Field>
<FieldLabel>First Name</FieldLabel>
<FieldControl name="firstName" />
</Field>
<Field>
<FieldLabel>Last Name</FieldLabel>
<FieldControl name="lastName" />
</Field>
</Fieldset>
Components
Fieldset (Root)
Disable all fields within the fieldset.
FieldsetLegend
The title/heading for the fieldset group.
Examples
Address Fieldset
<Fieldset>
<FieldsetLegend>Shipping Address</FieldsetLegend>
<Field>
<FieldLabel>Street</FieldLabel>
<FieldControl name="street" />
</Field>
<Field>
<FieldLabel>City</FieldLabel>
<FieldControl name="city" />
</Field>
<Field>
<FieldLabel>Postal Code</FieldLabel>
<FieldControl name="postalCode" />
</Field>
</Fieldset>
Disabled Fieldset
<Fieldset disabled>
<FieldsetLegend>Disabled Section</FieldsetLegend>
<Field>
<FieldLabel>Field 1</FieldLabel>
<FieldControl />
</Field>
</Fieldset>
Multiple Fieldsets in Form
<Form>
<Fieldset>
<FieldsetLegend>Account Details</FieldsetLegend>
{/* Fields */}
</Fieldset>
<Fieldset>
<FieldsetLegend>Preferences</FieldsetLegend>
{/* Fields */}
</Fieldset>
<Button type="submit">Save</Button>
</Form>
Accessibility
- Built on @base-ui/react for accessibility
- Semantic fieldset element
- Legend provides group name
- Disabled state affects all child fields