Fieldset provides semantic grouping for form controls with a legend heading, using Base UI’s Fieldset primitive.
Installation
npm install @soft-ui/react
Usage
import { Fieldset } from "@soft-ui/react/fieldset"
import { Input } from "@soft-ui/react/input"
<Fieldset.Root>
<Fieldset.Legend>Personal Information</Fieldset.Legend>
<Input placeholder="First name" />
<Input placeholder="Last name" />
<Input type="email" placeholder="Email" />
</Fieldset.Root>
<Fieldset>
<Fieldset.Legend>Personal Information</Fieldset.Legend>
<Input placeholder="First name" />
<Input placeholder="Last name" />
</Fieldset>
API Reference
Fieldset / Fieldset.Root
Whether all controls in the fieldset are disabled
Additional CSS classes. Default styling includes:
- Flexbox column layout
- 24px gap between children
- No border, padding, or margin (reset)
Fieldset.Legend
Additional CSS classes. Default styling includes:
- Large font size
- Semibold weight
- Strong content color
- No padding
Examples
<Fieldset>
<Fieldset.Legend>Contact Details</Fieldset.Legend>
<Input type="email" placeholder="Email" />
<Input type="tel" placeholder="Phone" />
</Fieldset>
Disabled Fieldset
<Fieldset disabled>
<Fieldset.Legend>Locked Settings</Fieldset.Legend>
<Input defaultValue="Locked" />
<Input defaultValue="Cannot edit" />
</Fieldset>
Multiple Sections
<form className="space-y-8">
<Fieldset>
<Fieldset.Legend>Personal Information</Fieldset.Legend>
<Input placeholder="First name" />
<Input placeholder="Last name" />
</Fieldset>
<Fieldset>
<Fieldset.Legend>Contact Information</Fieldset.Legend>
<Input type="email" placeholder="Email" />
<Input type="tel" placeholder="Phone" />
</Fieldset>
<Fieldset>
<Fieldset.Legend>Address</Fieldset.Legend>
<Input placeholder="Street" />
<Input placeholder="City" />
<Input placeholder="Postal code" />
</Fieldset>
</form>
With Description
<Fieldset>
<Fieldset.Legend>Security Settings</Fieldset.Legend>
<p className="text-sm text-content-subtle mb-4">
Configure your account security preferences.
</p>
<Input type="password" placeholder="Current password" />
<Input type="password" placeholder="New password" />
</Fieldset>