Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
Radio
Switch
Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
Choice Card
Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox and Switch components.
Field Group
Stack Field components with FieldGroup. Add FieldSeparator to divide them.
Responsive Layout
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.
Validation and Errors
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.
Label styled for both direct inputs and nested Field children.
Prop
Type
Default
className
string
asChild
boolean
false
<FieldLabel htmlFor="email">Email</FieldLabel>
FieldTitle
Renders a title with label styling inside FieldContent.
Prop
Type
Default
className
string
<FieldContent> <FieldTitle>Enable Touch ID</FieldTitle> <FieldDescription>Unlock your device faster.</FieldDescription></FieldContent>
FieldDescription
Helper text slot that automatically balances long lines in horizontal layouts.
Prop
Type
Default
className
string
<FieldDescription>We never share your email with anyone.</FieldDescription>
FieldSeparator
Visual divider to separate sections inside a FieldGroup. Accepts optional inline content.
Prop
Type
Default
className
string
<FieldSeparator>Or continue with</FieldSeparator>
FieldError
Accessible error container that accepts children or an errors array (e.g., from react-hook-form).
Prop
Type
Default
errors
Array<{ message?: string } | undefined>
className
string
<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.
import { Button } from "@/components/ui/button"import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet,} from "@/components/ui/field"import { Input } from "@/components/ui/input"export function FieldDemo() { return ( <div className="w-full max-w-md"> <form> <FieldGroup> <FieldSet> <FieldLegend>Payment Method</FieldLegend> <FieldDescription> All transactions are secure and encrypted </FieldDescription> <FieldGroup> <Field> <FieldLabel htmlFor="checkout-7j9-card-name-43j"> Name on Card </FieldLabel> <Input id="checkout-7j9-card-name-43j" placeholder="Evil Rabbit" required /> </Field> <Field> <FieldLabel htmlFor="checkout-7j9-card-number-uw1"> Card Number </FieldLabel> <Input id="checkout-7j9-card-number-uw1" placeholder="1234 5678 9012 3456" required /> <FieldDescription> Enter your 16-digit card number </FieldDescription> </Field> </FieldGroup> </FieldSet> <Field orientation="horizontal"> <Button type="submit">Submit</Button> <Button variant="outline" type="button"> Cancel </Button> </Field> </FieldGroup> </form> </div> )}
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet,} from "@/components/ui/field"import { Input } from "@/components/ui/input"export function FieldInput() { return ( <div className="w-full max-w-md"> <FieldSet> <FieldGroup> <Field> <FieldLabel htmlFor="username">Username</FieldLabel> <Input id="username" type="text" placeholder="Max Leiter" /> <FieldDescription> Choose a unique username for your account. </FieldDescription> </Field> <Field> <FieldLabel htmlFor="password">Password</FieldLabel> <FieldDescription> Must be at least 8 characters long. </FieldDescription> <Input id="password" type="password" placeholder="••••••••" /> </Field> </FieldGroup> </FieldSet> </div> )}
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet,} from "@/components/ui/field"import { Input } from "@/components/ui/input"export function FieldFieldset() { return ( <div className="w-full max-w-md space-y-6"> <FieldSet> <FieldLegend>Address Information</FieldLegend> <FieldDescription> We need your address to deliver your order. </FieldDescription> <FieldGroup> <Field> <FieldLabel htmlFor="street">Street Address</FieldLabel> <Input id="street" type="text" placeholder="123 Main St" /> </Field> <div className="grid grid-cols-2 gap-4"> <Field> <FieldLabel htmlFor="city">City</FieldLabel> <Input id="city" type="text" placeholder="New York" /> </Field> <Field> <FieldLabel htmlFor="zip">Postal Code</FieldLabel> <Input id="zip" type="text" placeholder="90502" /> </Field> </div> </FieldGroup> </FieldSet> </div> )}
import { Checkbox } from "@/components/ui/checkbox"import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet,} from "@/components/ui/field"export function FieldCheckbox() { return ( <div className="w-full max-w-md"> <FieldGroup> <FieldSet> <FieldLegend variant="label"> Show these items on the desktop </FieldLegend> <FieldDescription> Select the items you want to show on the desktop. </FieldDescription> <FieldGroup className="gap-3"> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-hard-disks-ljj" /> <FieldLabel htmlFor="finder-pref-9k2-hard-disks-ljj" className="font-normal" defaultChecked > Hard disks </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-external-disks-1yg" /> <FieldLabel htmlFor="finder-pref-9k2-external-disks-1yg" className="font-normal" > External disks </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-cds-dvds-fzt" /> <FieldLabel htmlFor="finder-pref-9k2-cds-dvds-fzt" className="font-normal" > CDs, DVDs, and iPods </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-connected-servers-6l2" /> <FieldLabel htmlFor="finder-pref-9k2-connected-servers-6l2" className="font-normal" > Connected servers </FieldLabel> </Field> </FieldGroup> </FieldSet> <FieldSeparator /> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-sync-folders-nep" defaultChecked /> <FieldContent> <FieldLabel htmlFor="finder-pref-9k2-sync-folders-nep"> Sync Desktop & Documents folders </FieldLabel> <FieldDescription> Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices. </FieldDescription> </FieldContent> </Field> </FieldGroup> </div> )}
import { Field, FieldContent, FieldDescription, FieldLabel,} from "@/components/ui/field"import { Switch } from "@/components/ui/switch"export function FieldSwitch() { return ( <div className="w-full max-w-md"> <Field orientation="horizontal"> <FieldContent> <FieldLabel htmlFor="2fa">Multi-factor authentication</FieldLabel> <FieldDescription> Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email. </FieldDescription> </FieldContent> <Switch id="2fa" /> </Field> </div> )}
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldSet, FieldTitle,} from "@/components/ui/field"import { RadioGroup, RadioGroupItem,} from "@/components/ui/radio-group"export function FieldChoiceCard() { return ( <div className="w-full max-w-md"> <FieldGroup> <FieldSet> <FieldLabel htmlFor="compute-environment-p8w"> Compute Environment </FieldLabel> <FieldDescription> Select the compute environment for your cluster. </FieldDescription> <RadioGroup defaultValue="kubernetes"> <FieldLabel htmlFor="kubernetes-r2h"> <Field orientation="horizontal"> <FieldContent> <FieldTitle>Kubernetes</FieldTitle> <FieldDescription> Run GPU workloads on a K8s configured cluster. </FieldDescription> </FieldContent> <RadioGroupItem value="kubernetes" id="kubernetes-r2h" /> </Field> </FieldLabel> <FieldLabel htmlFor="vm-z4k"> <Field orientation="horizontal"> <FieldContent> <FieldTitle>Virtual Machine</FieldTitle> <FieldDescription> Access a VM configured cluster to run GPU workloads. </FieldDescription> </FieldContent> <RadioGroupItem value="vm" id="vm-z4k" /> </Field> </FieldLabel> </RadioGroup> </FieldSet> </FieldGroup> </div> )}
import { Checkbox } from "@/components/ui/checkbox"import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator, FieldSet,} from "@/components/ui/field"export function FieldGroupExample() { return ( <div className="w-full max-w-md"> <FieldGroup> <FieldSet> <FieldLabel>Responses</FieldLabel> <FieldDescription> Get notified when ChatGPT responds to requests that take time, like research or image generation. </FieldDescription> <FieldGroup data-slot="checkbox-group"> <Field orientation="horizontal"> <Checkbox id="push" defaultChecked disabled /> <FieldLabel htmlFor="push" className="font-normal"> Push notifications </FieldLabel> </Field> </FieldGroup> </FieldSet> <FieldSeparator /> <FieldSet> <FieldLabel>Tasks</FieldLabel> <FieldDescription> Get notified when tasks you've created have updates.{" "} <a href="#">Manage tasks</a> </FieldDescription> <FieldGroup data-slot="checkbox-group"> <Field orientation="horizontal"> <Checkbox id="push-tasks" /> <FieldLabel htmlFor="push-tasks" className="font-normal"> Push notifications </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="email-tasks" /> <FieldLabel htmlFor="email-tasks" className="font-normal"> Email notifications </FieldLabel> </Field> </FieldGroup> </FieldSet> </FieldGroup> </div> )}
import { Button } from "@/components/ui/button"import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet,} from "@/components/ui/field"import { Input } from "@/components/ui/input"import { Textarea } from "@/components/ui/textarea"export function FieldResponsive() { return ( <div className="w-full max-w-4xl"> <form> <FieldSet> <FieldLegend>Profile</FieldLegend> <FieldDescription>Fill in your profile information.</FieldDescription> <FieldSeparator /> <FieldGroup> <Field orientation="responsive"> <FieldContent> <FieldLabel htmlFor="name">Name</FieldLabel> <FieldDescription> Provide your full name for identification </FieldDescription> </FieldContent> <Input id="name" placeholder="Evil Rabbit" required /> </Field> <FieldSeparator /> <Field orientation="responsive"> <FieldContent> <FieldLabel htmlFor="lastName">Message</FieldLabel> <FieldDescription> You can write your message here. Keep it short, preferably under 100 characters. </FieldDescription> </FieldContent> <Textarea id="message" placeholder="Hello, world!" required className="min-h-[100px] resize-none sm:min-w-[300px]" /> </Field> <FieldSeparator /> <Field orientation="responsive"> <Button type="submit">Submit</Button> <Button type="button" variant="outline"> Cancel </Button> </Field> </FieldGroup> </FieldSet> </form> </div> )}
import { Field, FieldDescription, FieldLabel,} from "@/components/ui/field"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"export function FieldSelect() { return ( <div className="w-full max-w-md"> <Field> <FieldLabel>Department</FieldLabel> <Select> <SelectTrigger> <SelectValue placeholder="Choose department" /> </SelectTrigger> <SelectContent> <SelectItem value="engineering">Engineering</SelectItem> <SelectItem value="design">Design</SelectItem> <SelectItem value="marketing">Marketing</SelectItem> <SelectItem value="sales">Sales</SelectItem> <SelectItem value="support">Customer Support</SelectItem> <SelectItem value="hr">Human Resources</SelectItem> <SelectItem value="finance">Finance</SelectItem> <SelectItem value="operations">Operations</SelectItem> </SelectContent> </Select> <FieldDescription> Select your department or area of work. </FieldDescription> </Field> </div> )}
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet,} from "@/components/ui/field"import { Textarea } from "@/components/ui/textarea"export function FieldTextarea() { return ( <div className="w-full max-w-md"> <FieldSet> <FieldGroup> <Field> <FieldLabel htmlFor="feedback">Feedback</FieldLabel> <Textarea id="feedback" placeholder="Your feedback helps us improve..." rows={4} /> <FieldDescription> Share your thoughts about our service. </FieldDescription> </Field> </FieldGroup> </FieldSet> </div> )}
"use client"import { useState } from "react"import { Field, FieldDescription, FieldTitle,} from "@/components/ui/field"import { Slider } from "@/components/ui/slider"export function FieldSlider() { const [value, setValue] = useState([200, 800]) return ( <div className="w-full max-w-md"> <Field> <FieldTitle>Price Range</FieldTitle> <FieldDescription> Set your budget range ($ <span className="font-medium tabular-nums">{value[0]}</span> -{" "} <span className="font-medium tabular-nums">{value[1]}</span>). </FieldDescription> <Slider value={value} onValueChange={setValue} max={1000} min={0} step={10} className="mt-2 w-full" aria-label="Price Range" /> </Field> </div> )}
