Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

import { Button } from "~/components/ui/button"
import { Checkbox } from "~/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet
} from "~/components/ui/field"
import { Input } from "~/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "~/components/ui/select"
import { Textarea } from "~/components/ui/textarea"

export function FieldDemo() {
  return (
    <div class="w-full max-w-md">
      <form>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Payment Method</FieldLegend>
            <FieldDescription>All transactions are secure and encrypted</FieldDescription>
            <FieldGroup>
              <Field>
                <FieldLabel for="checkout-7j9-card-name-43j">Name on Card</FieldLabel>
                <Input id="checkout-7j9-card-name-43j" placeholder="Evil Rabbit" required />
              </Field>
              <Field>
                <FieldLabel for="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>
              <div class="grid grid-cols-3 gap-4">
                <Field>
                  <FieldLabel for="checkout-exp-month-ts6">Month</FieldLabel>
                  <Select
                    defaultValue=""
                    itemComponent={(props) => (
                      <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
                    )}
                    options={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
                    placeholder="MM"
                  >
                    <SelectTrigger id="checkout-exp-month-ts6">
                      <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
                    </SelectTrigger>
                    <SelectContent />
                  </Select>
                </Field>
                <Field>
                  <FieldLabel for="checkout-7j9-exp-year-f59">Year</FieldLabel>
                  <Select
                    defaultValue=""
                    itemComponent={(props) => (
                      <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
                    )}
                    options={[2024, 2025, 2026, 2027, 2028, 2029]}
                    placeholder="YYYY"
                  >
                    <SelectTrigger id="checkout-7j9-exp-year-f59">
                      <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
                    </SelectTrigger>
                    <SelectContent />
                  </Select>
                </Field>
                <Field>
                  <FieldLabel for="checkout-7j9-cvv">CVV</FieldLabel>
                  <Input id="checkout-7j9-cvv" placeholder="123" required />
                </Field>
              </div>
            </FieldGroup>
          </FieldSet>
          <FieldSeparator />
          <FieldSet>
            <FieldLegend>Billing Address</FieldLegend>
            <FieldDescription>
              The billing address associated with your payment method
            </FieldDescription>
            <FieldGroup>
              <Field orientation="horizontal">
                <Checkbox defaultChecked id="checkout-7j9-same-as-shipping-wgm" />
                <FieldLabel class="font-normal" for="checkout-7j9-same-as-shipping-wgm">
                  Same as shipping address
                </FieldLabel>
              </Field>
            </FieldGroup>
          </FieldSet>
          <FieldSet>
            <FieldGroup>
              <Field>
                <FieldLabel for="checkout-7j9-optional-comments">Comments</FieldLabel>
                <Textarea
                  class="resize-none"
                  id="checkout-7j9-optional-comments"
                  placeholder="Add any additional comments"
                />
              </Field>
            </FieldGroup>
          </FieldSet>
          <Field orientation="horizontal">
            <Button type="submit">Submit</Button>
            <Button type="button" variant="outline">
              Cancel
            </Button>
          </Field>
        </FieldGroup>
      </form>
    </div>
  )
}

Usage

1
import {
2
  Field,
3
  FieldContent,
4
  FieldDescription,
5
  FieldError,
6
  FieldGroup,
7
  FieldLabel,
8
  FieldLegend,
9
  FieldSeparator,
10
  FieldSet,
11
  FieldTitle,
12
} from "~/components/ui/field";

1
<FieldSet>
2
  <FieldLegend>Profile</FieldLegend>
3
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
4
  <FieldGroup>
5
    <Field>
6
      <FieldLabel for="name">Full name</FieldLabel>
7
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
8
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
9
    </Field>
10
    <Field>
11
      <FieldLabel for="username">Username</FieldLabel>
12
      <Input id="username" autoComplete="off" aria-invalid />
13
      <FieldError>Choose another username.</FieldError>
14
    </Field>
15
    <Field orientation="horizontal">
16
      <Switch id="newsletter" />
17
      <FieldLabel for="newsletter">Subscribe to the newsletter</FieldLabel>
18
    </Field>
19
  </FieldGroup>
20
</FieldSet>

Anatomy

The Field family is designed for composing accessible forms. A typical field is structured as follows:

1
<Field>
2
  <FieldLabel for="input-id">Label</FieldLabel>
3
  {/* Input, Select, Switch, etc. */}
4
  <FieldDescription>Optional helper text.</FieldDescription>
5
  <FieldError>Validation message.</FieldError>
6
</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.

Examples

Input

import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from "~/components/ui/field"
import { Input } from "~/components/ui/input"

export function FieldInput() {
  return (
    <div class="w-full max-w-md">
      <FieldSet>
        <FieldGroup>
          <Field>
            <FieldLabel for="username">Username</FieldLabel>
            <Input id="username" placeholder="Max Leiter" type="text" />
            <FieldDescription>Choose a unique username for your account.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel for="password">Password</FieldLabel>
            <FieldDescription>Must be at least 8 characters long.</FieldDescription>
            <Input id="password" placeholder="••••••••" type="password" />
          </Field>
        </FieldGroup>
      </FieldSet>
    </div>
  )
}

1
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from "~/components/ui/field"
2
import { Input } from "~/components/ui/input"
3

4
export function FieldInput() {
5
  return (
6
    <div class="w-full max-w-md">
7
      <FieldSet>
8
        <FieldGroup>
9
          <Field>
10
            <FieldLabel for="username">Username</FieldLabel>
11
            <Input id="username" placeholder="Max Leiter" type="text" />
12
            <FieldDescription>Choose a unique username for your account.</FieldDescription>
13
          </Field>
14
          <Field>
15
            <FieldLabel for="password">Password</FieldLabel>
16
            <FieldDescription>Must be at least 8 characters long.</FieldDescription>
17
            <Input id="password" placeholder="••••••••" type="password" />
18
          </Field>
19
        </FieldGroup>
20
      </FieldSet>
21
    </div>
22
  )
23
}

Textarea

import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from "~/components/ui/field"
import { Textarea } from "~/components/ui/textarea"

export function FieldTextarea() {
  return (
    <div class="w-full max-w-md">
      <FieldSet>
        <FieldGroup>
          <Field>
            <FieldLabel for="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>
  )
}

1
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from "~/components/ui/field"
2
import { Textarea } from "~/components/ui/textarea"
3

4
export function FieldTextarea() {
5
  return (
6
    <div class="w-full max-w-md">
7
      <FieldSet>
8
        <FieldGroup>
9
          <Field>
10
            <FieldLabel for="feedback">Feedback</FieldLabel>
11
            <Textarea id="feedback" placeholder="Your feedback helps us improve..." rows={4} />
12
            <FieldDescription>Share your thoughts about our service.</FieldDescription>
13
          </Field>
14
        </FieldGroup>
15
      </FieldSet>
16
    </div>
17
  )
18
}

Select

import { Field, FieldDescription, FieldLabel } from "~/components/ui/field"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "~/components/ui/select"

export function FieldSelect() {
  return (
    <div class="w-full max-w-md">
      <Field>
        <FieldLabel>Department</FieldLabel>
        <Select
          itemComponent={(props) => (
            <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
          )}
          options={[
            "Engineering",
            "Design",
            "Marketing",
            "Sales",
            "Customer Support",
            "Human Resources",
            "Finance",
            "Operations"
          ]}
          placeholder="Choose department"
        >
          <SelectTrigger aria-label="Department">
            <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
          </SelectTrigger>
          <SelectContent />
        </Select>
        <FieldDescription>Select your department or area of work.</FieldDescription>
      </Field>
    </div>
  )
}

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field"
2
import {
3
  Select,
4
  SelectContent,
5
  SelectItem,
6
  SelectTrigger,
7
  SelectValue
8
} from "~/components/ui/select"
9

10
export function FieldSelect() {
11
  return (
12
    <div class="w-full max-w-md">
13
      <Field>
14
        <FieldLabel>Department</FieldLabel>
15
        <Select
16
          itemComponent={(props) => (
17
            <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
18
          )}
19
          options={[
20
            "Engineering",
21
            "Design",
22
            "Marketing",
23
            "Sales",
24
            "Customer Support",
25
            "Human Resources",
26
            "Finance",
27
            "Operations"
28
          ]}
29
          placeholder="Choose department"
30
        >
31
          <SelectTrigger aria-label="Department">
32
            <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
33
          </SelectTrigger>
34
          <SelectContent />
35
        </Select>
36
        <FieldDescription>Select your department or area of work.</FieldDescription>
37
      </Field>
38
    </div>
39
  )
40
}

Slider

import { createSignal } from "solid-js"

import { Field, FieldDescription, FieldTitle } from "~/components/ui/field"
import { Slider } from "~/components/ui/slider"

export function FieldSlider() {
  const [values, setValues] = createSignal([200, 800])
  return (
    <div class="w-full max-w-md">
      <Field>
        <FieldTitle>Price Range</FieldTitle>
        <FieldDescription>
          Set your budget range ($
          <span class="font-medium tabular-nums">{values()[0]}</span> -{" "}
          <span class="font-medium tabular-nums">{values()[1]}</span>).
        </FieldDescription>
        <Slider
          aria-label="Price Range"
          class="mt-2 w-full"
          maxValue={1000}
          minValue={0}
          onChange={setValues}
          step={10}
          value={values()}
        />
      </Field>
    </div>
  )
}

1
import { createSignal } from "solid-js"
2

3
import { Field, FieldDescription, FieldTitle } from "~/components/ui/field"
4
import { Slider } from "~/components/ui/slider"
5

6
export function FieldSlider() {
7
  const [values, setValues] = createSignal([200, 800])
8
  return (
9
    <div class="w-full max-w-md">
10
      <Field>
11
        <FieldTitle>Price Range</FieldTitle>
12
        <FieldDescription>
13
          Set your budget range ($
14
          <span class="font-medium tabular-nums">{values()[0]}</span> -{" "}
15
          <span class="font-medium tabular-nums">{values()[1]}</span>).
16
        </FieldDescription>
17
        <Slider
18
          aria-label="Price Range"
19
          class="mt-2 w-full"
20
          maxValue={1000}
21
          minValue={0}
22
          onChange={setValues}
23
          step={10}
24
          value={values()}
25
        />
26
      </Field>
27
    </div>
28
  )
29
}

Fieldset

Address Information

We need your address to deliver your order.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet
} from "~/components/ui/field"
import { Input } from "~/components/ui/input"

export function FieldFieldset() {
  return (
    <div class="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 for="street">Street Address</FieldLabel>
            <Input id="street" placeholder="123 Main St" type="text" />
          </Field>
          <div class="grid grid-cols-2 gap-4">
            <Field>
              <FieldLabel for="city">City</FieldLabel>
              <Input id="city" placeholder="New York" type="text" />
            </Field>
            <Field>
              <FieldLabel for="zip">Postal Code</FieldLabel>
              <Input id="zip" placeholder="90502" type="text" />
            </Field>
          </div>
        </FieldGroup>
      </FieldSet>
    </div>
  )
}

1
import {
2
  Field,
3
  FieldDescription,
4
  FieldGroup,
5
  FieldLabel,
6
  FieldLegend,
7
  FieldSet
8
} from "~/components/ui/field"
9
import { Input } from "~/components/ui/input"
10

11
export function FieldFieldset() {
12
  return (
13
    <div class="w-full max-w-md space-y-6">
14
      <FieldSet>
15
        <FieldLegend>Address Information</FieldLegend>
16
        <FieldDescription>We need your address to deliver your order.</FieldDescription>
17
        <FieldGroup>
18
          <Field>
19
            <FieldLabel for="street">Street Address</FieldLabel>
20
            <Input id="street" placeholder="123 Main St" type="text" />
21
          </Field>
22
          <div class="grid grid-cols-2 gap-4">
23
            <Field>
24
              <FieldLabel for="city">City</FieldLabel>
25
              <Input id="city" placeholder="New York" type="text" />
26
            </Field>
27
            <Field>
28
              <FieldLabel for="zip">Postal Code</FieldLabel>
29
              <Input id="zip" placeholder="90502" type="text" />
30
            </Field>
31
          </div>
32
        </FieldGroup>
33
      </FieldSet>
34
    </div>
35
  )
36
}

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Sync Desktop & Documents folders

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

import { Checkbox } from "~/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet
} from "~/components/ui/field"

export function FieldCheckbox() {
  return (
    <div class="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 class="gap-3">
            <Field orientation="horizontal">
              <Checkbox defaultChecked id="finder-pref-9k2-hard-disks-ljj" />
              <FieldLabel class="font-normal" for="finder-pref-9k2-hard-disks-ljj">
                Hard disks
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <Checkbox id="finder-pref-9k2-external-disks-1yg" />
              <FieldLabel class="font-normal" for="finder-pref-9k2-external-disks-1yg">
                External disks
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
              <FieldLabel class="font-normal" for="finder-pref-9k2-cds-dvds-fzt">
                CDs, DVDs, and iPods
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
              <FieldLabel class="font-normal" for="finder-pref-9k2-connected-servers-6l2">
                Connected servers
              </FieldLabel>
            </Field>
          </FieldGroup>
        </FieldSet>
        <FieldSeparator />
        <Field orientation="horizontal">
          <Checkbox defaultChecked id="finder-pref-9k2-sync-folders-nep" />
          <FieldContent>
            <FieldLabel for="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>
  )
}

1
import { Checkbox } from "~/components/ui/checkbox"
2
import {
3
  Field,
4
  FieldContent,
5
  FieldDescription,
6
  FieldGroup,
7
  FieldLabel,
8
  FieldLegend,
9
  FieldSeparator,
10
  FieldSet
11
} from "~/components/ui/field"
12

13
export function FieldCheckbox() {
14
  return (
15
    <div class="w-full max-w-md">
16
      <FieldGroup>
17
        <FieldSet>
18
          <FieldLegend variant="label">Show these items on the desktop</FieldLegend>
19
          <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>
20
          <FieldGroup class="gap-3">
21
            <Field orientation="horizontal">
22
              <Checkbox defaultChecked id="finder-pref-9k2-hard-disks-ljj" />
23
              <FieldLabel class="font-normal" for="finder-pref-9k2-hard-disks-ljj">
24
                Hard disks
25
              </FieldLabel>
26
            </Field>
27
            <Field orientation="horizontal">
28
              <Checkbox id="finder-pref-9k2-external-disks-1yg" />
29
              <FieldLabel class="font-normal" for="finder-pref-9k2-external-disks-1yg">
30
                External disks
31
              </FieldLabel>
32
            </Field>
33
            <Field orientation="horizontal">
34
              <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
35
              <FieldLabel class="font-normal" for="finder-pref-9k2-cds-dvds-fzt">
36
                CDs, DVDs, and iPods
37
              </FieldLabel>
38
            </Field>
39
            <Field orientation="horizontal">
40
              <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
41
              <FieldLabel class="font-normal" for="finder-pref-9k2-connected-servers-6l2">
42
                Connected servers
43
              </FieldLabel>
44
            </Field>
45
          </FieldGroup>
46
        </FieldSet>
47
        <FieldSeparator />
48
        <Field orientation="horizontal">
49
          <Checkbox defaultChecked id="finder-pref-9k2-sync-folders-nep" />
50
          <FieldContent>
51
            <FieldLabel for="finder-pref-9k2-sync-folders-nep">
52
              Sync Desktop & Documents folders
53
            </FieldLabel>
54
            <FieldDescription>
55
              Your Desktop & Documents folders are being synced with iCloud Drive. You can access
56
              them from other devices.
57
            </FieldDescription>
58
          </FieldContent>
59
        </Field>
60
      </FieldGroup>
61
    </div>
62
  )
63
}

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

import { Field, FieldDescription, FieldLabel, FieldSet } from "~/components/ui/field"
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group"

export function FieldRadio() {
  return (
    <div class="w-full max-w-md">
      <FieldSet>
        <FieldLabel>Subscription Plan</FieldLabel>
        <FieldDescription>Yearly and lifetime plans offer significant savings.</FieldDescription>
        <RadioGroup defaultValue="monthly">
          <Field orientation="horizontal">
            <RadioGroupItem id="plan-monthly" value="monthly" />
            <FieldLabel class="font-normal" for="plan-monthly">
              Monthly ($9.99/month)
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <RadioGroupItem id="plan-yearly" value="yearly" />
            <FieldLabel class="font-normal" for="plan-yearly">
              Yearly ($99.99/year)
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <RadioGroupItem id="plan-lifetime" value="lifetime" />
            <FieldLabel class="font-normal" for="plan-lifetime">
              Lifetime ($299.99)
            </FieldLabel>
          </Field>
        </RadioGroup>
      </FieldSet>
    </div>
  )
}

1
import { Field, FieldDescription, FieldLabel, FieldSet } from "~/components/ui/field"
2
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group"
3

4
export function FieldRadio() {
5
  return (
6
    <div class="w-full max-w-md">
7
      <FieldSet>
8
        <FieldLabel>Subscription Plan</FieldLabel>
9
        <FieldDescription>Yearly and lifetime plans offer significant savings.</FieldDescription>
10
        <RadioGroup defaultValue="monthly">
11
          <Field orientation="horizontal">
12
            <RadioGroupItem id="plan-monthly" value="monthly" />
13
            <FieldLabel class="font-normal" for="plan-monthly">
14
              Monthly ($9.99/month)
15
            </FieldLabel>
16
          </Field>
17
          <Field orientation="horizontal">
18
            <RadioGroupItem id="plan-yearly" value="yearly" />
19
            <FieldLabel class="font-normal" for="plan-yearly">
20
              Yearly ($99.99/year)
21
            </FieldLabel>
22
          </Field>
23
          <Field orientation="horizontal">
24
            <RadioGroupItem id="plan-lifetime" value="lifetime" />
25
            <FieldLabel class="font-normal" for="plan-lifetime">
26
              Lifetime ($299.99)
27
            </FieldLabel>
28
          </Field>
29
        </RadioGroup>
30
      </FieldSet>
31
    </div>
32
  )
33
}

Switch

Multi-factor authentication

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

import { Field, FieldContent, FieldDescription, FieldLabel } from "~/components/ui/field"
import { Switch } from "~/components/ui/switch"

export function FieldSwitch() {
  return (
    <div class="w-full max-w-md">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldLabel for="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>
  )
}

1
import { Field, FieldContent, FieldDescription, FieldLabel } from "~/components/ui/field"
2
import { Switch } from "~/components/ui/switch"
3

4
export function FieldSwitch() {
5
  return (
6
    <div class="w-full max-w-md">
7
      <Field orientation="horizontal">
8
        <FieldContent>
9
          <FieldLabel for="2fa">Multi-factor authentication</FieldLabel>
10
          <FieldDescription>
11
            Enable multi-factor authentication. If you do not have a two-factor device, you can use
12
            a one-time code sent to your email.
13
          </FieldDescription>
14
        </FieldContent>
15
        <Switch id="2fa" />
16
      </Field>
17
    </div>
18
  )
19
}

Choice Card

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s configured cluster.

Virtual Machine

Access a VM configured cluster to run GPU workloads.

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 class="w-full max-w-md">
      <FieldGroup>
        <FieldSet>
          <FieldLabel for="compute-environment-p8w">Compute Environment</FieldLabel>
          <FieldDescription>Select the compute environment for your cluster.</FieldDescription>
          <RadioGroup defaultValue="kubernetes">
            <FieldLabel for="kubernetes-r2h">
              <Field orientation="horizontal">
                <FieldContent>
                  <FieldTitle>Kubernetes</FieldTitle>
                  <FieldDescription>
                    Run GPU workloads on a K8s configured cluster.
                  </FieldDescription>
                </FieldContent>
                <RadioGroupItem id="kubernetes-r2h" value="kubernetes" />
              </Field>
            </FieldLabel>
            <FieldLabel for="vm-z4k">
              <Field orientation="horizontal">
                <FieldContent>
                  <FieldTitle>Virtual Machine</FieldTitle>
                  <FieldDescription>
                    Access a VM configured cluster to run GPU workloads.
                  </FieldDescription>
                </FieldContent>
                <RadioGroupItem id="vm-z4k" value="vm" />
              </Field>
            </FieldLabel>
          </RadioGroup>
        </FieldSet>
      </FieldGroup>
    </div>
  )
}

1
import {
2
  Field,
3
  FieldContent,
4
  FieldDescription,
5
  FieldGroup,
6
  FieldLabel,
7
  FieldSet,
8
  FieldTitle
9
} from "~/components/ui/field"
10
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group"
11

12
export function FieldChoiceCard() {
13
  return (
14
    <div class="w-full max-w-md">
15
      <FieldGroup>
16
        <FieldSet>
17
          <FieldLabel for="compute-environment-p8w">Compute Environment</FieldLabel>
18
          <FieldDescription>Select the compute environment for your cluster.</FieldDescription>
19
          <RadioGroup defaultValue="kubernetes">
20
            <FieldLabel for="kubernetes-r2h">
21
              <Field orientation="horizontal">
22
                <FieldContent>
23
                  <FieldTitle>Kubernetes</FieldTitle>
24
                  <FieldDescription>
25
                    Run GPU workloads on a K8s configured cluster.
26
                  </FieldDescription>
27
                </FieldContent>
28
                <RadioGroupItem id="kubernetes-r2h" value="kubernetes" />
29
              </Field>
30
            </FieldLabel>
31
            <FieldLabel for="vm-z4k">
32
              <Field orientation="horizontal">
33
                <FieldContent>
34
                  <FieldTitle>Virtual Machine</FieldTitle>
35
                  <FieldDescription>
36
                    Access a VM configured cluster to run GPU workloads.
37
                  </FieldDescription>
38
                </FieldContent>
39
                <RadioGroupItem id="vm-z4k" value="vm" />
40
              </Field>
41
            </FieldLabel>
42
          </RadioGroup>
43
        </FieldSet>
44
      </FieldGroup>
45
    </div>
46
  )
47
}

Field Group

Responses

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Push notifications

Tasks

Get notified when tasks you've created have updates. Manage tasks

Push notifications

Email notifications

import { Checkbox } from "~/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
  FieldSet
} from "~/components/ui/field"

export function FieldGroupExample() {
  return (
    <div class="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 defaultChecked disabled id="push" />
              <FieldLabel class="font-normal" for="push">
                Push notifications
              </FieldLabel>
            </Field>
          </FieldGroup>
        </FieldSet>
        <FieldSeparator />
        <FieldSet>
          <FieldLabel>Tasks</FieldLabel>
          <FieldDescription>
            Get notified when tasks you&apos;ve created have updates. <a href="/#">Manage tasks</a>
          </FieldDescription>
          <FieldGroup data-slot="checkbox-group">
            <Field orientation="horizontal">
              <Checkbox id="push-tasks" />
              <FieldLabel class="font-normal" for="push-tasks">
                Push notifications
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <Checkbox id="email-tasks" />
              <FieldLabel class="font-normal" for="email-tasks">
                Email notifications
              </FieldLabel>
            </Field>
          </FieldGroup>
        </FieldSet>
      </FieldGroup>
    </div>
  )
}

1
import { Checkbox } from "~/components/ui/checkbox"
2
import {
3
  Field,
4
  FieldDescription,
5
  FieldGroup,
6
  FieldLabel,
7
  FieldSeparator,
8
  FieldSet
9
} from "~/components/ui/field"
10

11
export function FieldGroupExample() {
12
  return (
13
    <div class="w-full max-w-md">
14
      <FieldGroup>
15
        <FieldSet>
16
          <FieldLabel>Responses</FieldLabel>
17
          <FieldDescription>
18
            Get notified when ChatGPT responds to requests that take time, like research or image
19
            generation.
20
          </FieldDescription>
21
          <FieldGroup data-slot="checkbox-group">
22
            <Field orientation="horizontal">
23
              <Checkbox defaultChecked disabled id="push" />
24
              <FieldLabel class="font-normal" for="push">
25
                Push notifications
26
              </FieldLabel>
27
            </Field>
28
          </FieldGroup>
29
        </FieldSet>
30
        <FieldSeparator />
31
        <FieldSet>
32
          <FieldLabel>Tasks</FieldLabel>
33
          <FieldDescription>
34
            Get notified when tasks you&apos;ve created have updates. <a href="/#">Manage tasks</a>
35
          </FieldDescription>
36
          <FieldGroup data-slot="checkbox-group">
37
            <Field orientation="horizontal">
38
              <Checkbox id="push-tasks" />
39
              <FieldLabel class="font-normal" for="push-tasks">
40
                Push notifications
41
              </FieldLabel>
42
            </Field>
43
            <Field orientation="horizontal">
44
              <Checkbox id="email-tasks" />
45
              <FieldLabel class="font-normal" for="email-tasks">
46
                Email notifications
47
              </FieldLabel>
48
            </Field>
49
          </FieldGroup>
50
        </FieldSet>
51
      </FieldGroup>
52
    </div>
53
  )
54
}

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.

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 class="w-full max-w-4xl">
      <form>
        <FieldSet>
          <FieldLegend>Profile</FieldLegend>
          <FieldDescription>Fill in your profile information.</FieldDescription>
          <FieldSeparator />
          <FieldGroup>
            <Field orientation="responsive">
              <FieldContent>
                <FieldLabel for="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 for="lastName">Message</FieldLabel>
                <FieldDescription>
                  You can write your message here. Keep it short, preferably under 100 characters.
                </FieldDescription>
              </FieldContent>
              <Textarea
                class="min-h-[100px] resize-none sm:min-w-[300px]"
                id="message"
                placeholder="Hello, world!"
                required
              />
            </Field>
            <FieldSeparator />
            <Field orientation="responsive">
              <Button type="submit">Submit</Button>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </Field>
          </FieldGroup>
        </FieldSet>
      </form>
    </div>
  )
}

1
import { Button } from "~/components/ui/button"
2
import {
3
  Field,
4
  FieldContent,
5
  FieldDescription,
6
  FieldGroup,
7
  FieldLabel,
8
  FieldLegend,
9
  FieldSeparator,
10
  FieldSet
11
} from "~/components/ui/field"
12
import { Input } from "~/components/ui/input"
13
import { Textarea } from "~/components/ui/textarea"
14

15
export function FieldResponsive() {
16
  return (
17
    <div class="w-full max-w-4xl">
18
      <form>
19
        <FieldSet>
20
          <FieldLegend>Profile</FieldLegend>
21
          <FieldDescription>Fill in your profile information.</FieldDescription>
22
          <FieldSeparator />
23
          <FieldGroup>
24
            <Field orientation="responsive">
25
              <FieldContent>
26
                <FieldLabel for="name">Name</FieldLabel>
27
                <FieldDescription>Provide your full name for identification</FieldDescription>
28
              </FieldContent>
29
              <Input id="name" placeholder="Evil Rabbit" required />
30
            </Field>
31
            <FieldSeparator />
32
            <Field orientation="responsive">
33
              <FieldContent>
34
                <FieldLabel for="lastName">Message</FieldLabel>
35
                <FieldDescription>
36
                  You can write your message here. Keep it short, preferably under 100 characters.
37
                </FieldDescription>
38
              </FieldContent>
39
              <Textarea
40
                class="min-h-[100px] resize-none sm:min-w-[300px]"
41
                id="message"
42
                placeholder="Hello, world!"
43
                required
44
              />
45
            </Field>
46
            <FieldSeparator />
47
            <Field orientation="responsive">
48
              <Button type="submit">Submit</Button>
49
              <Button type="button" variant="outline">
50
                Cancel
51
              </Button>
52
            </Field>
53
          </FieldGroup>
54
        </FieldSet>
55
      </form>
56
    </div>
57
  )
58
}

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.

1
<Field data-invalid>
2
  <FieldLabel htmlFor="email">Email</FieldLabel>
3
  <Input id="email" type="email" aria-invalid />
4
  <FieldError>Enter a valid email address.</FieldError>
5
</Field>

Accessibility

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.

API Reference

FieldSet

Container that renders a semantic fieldset with spacing presets.

Prop	Type	Default
`className`	`string`

<FieldSet>
  <FieldLegend>Delivery</FieldLegend>
  <FieldGroup>{/* Fields */}</FieldGroup>
</FieldSet>

FieldLegend

Legend element for a FieldSet. Switch to the label variant to align with label sizing.

Prop	Type	Default
`variant`	`"legend" \| "label"`	`"legend"`
`className`	`string`

<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.

FieldGroup

Layout wrapper that stacks Field components and enables container queries for responsive orientations.

Prop	Type	Default
`className`	`string`

<FieldGroup className="@container/field-group flex flex-col gap-6">
  <Field>{/* ... */}</Field>
  <Field>{/* ... */}</Field>
</FieldGroup>

Field

The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.

Prop	Type	Default
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
`className`	`string`
`data-invalid`	`boolean`

<Field orientation="horizontal">
  <FieldLabel htmlFor="remember">Remember me</FieldLabel>
  <Switch id="remember" />
</Field>

FieldContent

Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.

Prop	Type	Default
`className`	`string`

<Field>
  <Checkbox id="notifications" />
  <FieldContent>
    <FieldLabel htmlFor="notifications">Notifications</FieldLabel>
    <FieldDescription>Email, SMS, and push options.</FieldDescription>
  </FieldContent>
</Field>

FieldLabel

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 formisch).

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.

Empty Form