Copy import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "@/components/ui/field" Copy < FieldSet > < FieldLegend > Profile </ FieldLegend > < FieldDescription > This appears on invoices and emails. </ FieldDescription > < FieldGroup > < Field > < FieldLabel htmlFor = "name" > Full name </ FieldLabel > < Input id = "name" autoComplete = "off" placeholder = "Evil Rabbit" /> < FieldDescription > This appears on invoices and emails. </ FieldDescription > </ Field > < Field > < FieldLabel htmlFor = "username" > Username </ FieldLabel > < Input id = "username" autoComplete = "off" aria-invalid /> < FieldError > Choose another username. </ FieldError > </ Field > < Field orientation = "horizontal" > < Switch id = "newsletter" /> < FieldLabel htmlFor = "newsletter" > Subscribe to the newsletter </ FieldLabel > </ Field > </ FieldGroup > </ FieldSet > A single control with label, helper text, and validation.
Copy Field ├── FieldLabel ├── Input / Textarea / Switch / Select ├── FieldDescription └── FieldError Related fields in one group. Use FieldSeparator between sections when needed.
Copy FieldGroup ├── Field │ ├── FieldLabel │ ├── Input / Textarea / Switch / Select │ ├── FieldDescription │ └── FieldError ├── FieldSeparator └── Field ├── FieldLabel └── Input / Textarea / Switch / Select Semantic grouping with a legend and description, usually containing a FieldGroup.
Copy FieldSet ├── FieldLegend ├── FieldDescription └── FieldGroup ├── Field │ ├── FieldLabel │ ├── Input / Textarea / Switch / Select │ ├── FieldDescription │ └── FieldError └── Field ├── FieldLabel └── Input / Textarea / Switch / Select The Field family is designed for composing accessible forms. A typical field is structured as follows:
Copy < Field > < FieldLabel htmlFor = "input-id" > Label </ FieldLabel > { /* Input, Select, Switch, etc. */ } < FieldDescription > Optional helper text. </ FieldDescription > < FieldError > Validation message. </ FieldError > </ Field >
Field is the core wrapper for a single field.FieldContent is a flex column that groups label and description. Not required if you have no description.Wrap related fields with FieldGroup, and use FieldSet with FieldLegend for semantic grouping.
See the Form documentation for building forms with the Field component and React Hook Form or Tanstack Form , or Formisch .
Feedback Share your thoughts about our service.
Department Choose department Engineering Design Marketing Sales Customer Support Human Resources Finance Operations
Select your department or area of work.
Price Range
Set your budget range ($200 - 800 ).
Address Information We need your address to deliver your order.
Show these items on the desktop Select the items you want to show on the desktop.
Subscription Plan Yearly and lifetime plans offer significant savings.
Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox and Switch components.
Compute Environment Select the compute environment for your cluster.
Stack Field components with FieldGroup. Add FieldSeparator to divide them.
Responses Get notified when ChatGPT responds to requests that take time, like research or image generation.
Tasks Get notified when tasks you've created have updates. Manage tasks
To enable RTL support, see the RTL configuration guide .
Vertical fields: Default orientation stacks label, control, and helper text, ideal for mobile-first layouts.Horizontal fields: Set orientation="horizontal" on Field to align the label and control side-by-side. Pair with FieldContent to keep descriptions aligned.Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on FieldGroup to switch orientations at specific breakpoints.
Add data-invalid to Field to switch the entire block into an error state.
Add aria-invalid on the input itself for assistive technologies.
Render FieldError immediately after the control or inside FieldContent to keep error messages aligned with the field.
Copy < Field data-invalid > < FieldLabel htmlFor = "email" > Email </ FieldLabel > < Input id = "email" type = "email" aria-invalid /> < FieldError > Enter a valid email address. </ FieldError > </ Field >
FieldSet and FieldLegend keep related controls grouped for keyboard and assistive tech users.Field outputs role="group" so nested controls inherit labeling from FieldLabel and FieldLegend when combined.Apply FieldSeparator sparingly to ensure screen readers encounter clear section boundaries.
Container that renders a semantic fieldset with spacing presets.
Copy < FieldSet > < FieldLegend > Delivery </ FieldLegend > < FieldGroup > { /* Fields */ } </ FieldGroup > </ FieldSet > Legend element for a FieldSet. Switch to the label variant to align with label sizing.
Copy < FieldLegend variant = "label" > Notification Preferences </ FieldLegend > The FieldLegend has two variants: legend and label. The label variant applies label sizing and alignment. Handy if you have nested FieldSet.
Layout wrapper that stacks Field components and enables container queries for responsive orientations.
Copy < FieldGroup className = "@container/field-group flex flex-col gap-6" > < Field > { /* ... */ } </ Field > < Field > { /* ... */ } </ Field > </ FieldGroup > The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.
Copy < Field orientation = "horizontal" > < FieldLabel htmlFor = "remember" > Remember me </ FieldLabel > < Switch id = "remember" /> </ Field > Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.
Copy < Field > < Checkbox id = "notifications" /> < FieldContent > < FieldLabel htmlFor = "notifications" > Notifications </ FieldLabel > < FieldDescription > Email, SMS, and push options. </ FieldDescription > </ FieldContent > </ Field > Label styled for both direct inputs and nested Field children.
Copy < FieldLabel htmlFor = "email" > Email </ FieldLabel > Renders a title with label styling inside FieldContent.
Copy < FieldContent > < FieldTitle > Enable Touch ID </ FieldTitle > < FieldDescription > Unlock your device faster. </ FieldDescription > </ FieldContent > Helper text slot that automatically balances long lines in horizontal layouts.
Copy < FieldDescription > We never share your email with anyone. </ FieldDescription > Visual divider to separate sections inside a FieldGroup. Accepts optional inline content.
Copy < FieldSeparator > Or continue with </ FieldSeparator > Accessible error container that accepts children or an errors array (e.g., from react-hook-form).
Copy < FieldError errors ={ errors.username } /> When the errors array contains multiple messages, the component renders a list automatically.
FieldError also accepts issues produced by any validator that implements Standard Schema , including Zod, Valibot, and ArkType. Pass the issues array from the schema result directly to render a unified error list across libraries.