Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- EmptyNew
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input GroupNew
- KbdNew
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- SkeletonNew
- Slider
- SpinnerNew
- 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>On This Page