Form
Fieldset
A native fieldset with a stylable legend for grouping related fields under one name.
Show codeHide code
"use client";
import {
Field,
FieldControl,
FieldDescription,
FieldLabel,
} from "@/registry/lilt/ui/field";
import { Fieldset, FieldsetLegend } from "@/registry/lilt/ui/fieldset";
export default function FieldsetDemo() {
return (
<Fieldset className="w-full max-w-sm">
<FieldsetLegend>Shipping details</FieldsetLegend>
<Field>
<FieldLabel>Street</FieldLabel>
<FieldControl placeholder="12 Fern Hollow Lane" />
<FieldDescription>Where the seed packets should land.</FieldDescription>
</Field>
<Field>
<FieldLabel>City</FieldLabel>
<FieldControl placeholder="Everbloom" />
</Field>
</Fieldset>
);
}Installation
npx shadcn@latest add @lilt/fieldsetAccessibility
- A native fieldset: the legend names the whole group, so screen readers announce it before each field inside.
- Disabling the fieldset disables every control in it — one prop, no per-field bookkeeping.