Primitive · CLI
Fieldset
Legend + soft-rect group chrome for related controls.
Preview
npx shadcn@latest add @atroui/fieldsetInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/fieldsetSource lands in your repo. Installation · Registry
Usage
Group related Fields under one legend when the form has clear sections. Soft-rect chrome stays quiet — no cards-inside-cards.
tsx
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"
import { Field, FieldControl, FieldLabel } from "@/components/ui/field"
<Fieldset>
<FieldsetLegend>Billing contact</FieldsetLegend>
<Field name="name">
<FieldLabel>Name</FieldLabel>
<FieldControl placeholder="Ada Lovelace" />
</Field>
<Field name="email">
<FieldLabel>Email</FieldLabel>
<FieldControl type="email" placeholder="ada@studio.dev" />
</Field>
</Fieldset>Fieldset