- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Field
Form field composition primitives including Field, FieldSet, FieldLegend, FieldGroup, FieldSeparator, FieldError, and FieldTitle. Supports vertical, horizontal, and responsive orientations with invalid and disabled styling hooks.
Figma: DS-001 Foundations ยท 18748:157933
Import
Live Demo
Field composition primitives with orientation, invalid states, legends, separators, and grouped layouts.
Interactive field (Figma 18684:15221 / 18692:40259 / 18707:231968)
This is an input description.
Field separator + legend (Figma 18692:40391, 18707:192201)
FieldGroup horizontal (Figma 21209:145706)
This is an input description.
This is an input description.
Buttons composition (Figma 18707:216906)
Props
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "responsive" | "vertical" | Layout direction for label/content composition |
| data-invalid | boolean | false | Marks the field invalid and applies destructive styles |