Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Fieldset
A native fieldset element with a legend.
import {
Field,
FieldDescription,
FieldLabel,
} from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";
import { Input } from "@/components/ui/input";
export default function Particle() {
return (
<Fieldset>
<FieldsetLegend>Billing Details</FieldsetLegend>
<Field>
<FieldLabel>Company</FieldLabel>
<Input placeholder="Enter company name" type="text" />
<FieldDescription>
The name that will appear on invoices.
</FieldDescription>
</Field>
<Field>
<FieldLabel>Tax ID</FieldLabel>
<Input placeholder="Enter tax identification number" type="text" />
<FieldDescription>
Your business tax identification number.
</FieldDescription>
</Field>
</Fieldset>
);
}
Installation
pnpm dlx shadcn@latest add @coss/fieldset
Usage
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"<Fieldset>
<FieldsetLegend>Fieldset legend</FieldsetLegend>
</Fieldset>API Reference
Fieldset
Root component. Styled wrapper for Fieldset.Root from Base UI with flex column layout.
FieldsetLegend
Legend for the fieldset. Styled wrapper for Fieldset.Legend from Base UI with semibold font weight.