# Field Combine labels, controls, and help text to compose accessible form fields and grouped inputs. ```svelte

Payment Method All transactions are secure and encrypted Name on Card Card Number Enter your 16-digit card number

Month {month || "MM"} 01 02 03 04 05 06 07 08 09 10 11 12 Year {year || "YYYY"} 2024 2025 2026 2027 2028 2029 CVV

Billing Address The billing address associated with your payment method Same as shipping address Comments

</Field.Field>
        </Field.Group>
      </Field.Set>
      <Field.Field orientation="horizontal">
        <Button type="submit">Submit</Button>
        <Button variant="outline" type="button">Cancel</Button>
      </Field.Field>
    </Field.Group>
  </form>
</div>
```

## Installation

```bash
pnpm dlx shadcn-svelte@latest add field
```

```bash
npx shadcn-svelte@latest add field
```

```bash
bun x shadcn-svelte@latest add field
```

## Usage

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
</script>
<Field.Set>
  <Field.Legend>Profile</Field.Legend>
  <Field.Description>This appears on invoices and emails.</Field.Description>
  <Field.Group>
    <Field.Field>
      <Field.Label for="name">Full name</Field.Label>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <Field.Description
        >This appears on invoices and emails.</Field.Description
      >
    </Field.Field>
    <Field.Field>
      <Field.Label for="username">Username</Field.Label>
      <Input id="username" autoComplete="off" aria-invalid />
      <Field.Error>Choose another username.</Field.Error>
    </Field.Field>
    <Field.Field orientation="horizontal">
      <Switch id="newsletter" />
      <Field.Label for="newsletter">Subscribe to the newsletter</Field.Label>
    </Field.Field>
  </Field.Group>
</Field.Set>
```

## Anatomy

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

```svelte
<Field>
  <FieldLabel for="input-id">Label</FieldLabel>
  <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.

## Examples

### Input

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
</script>
<div class="w-full max-w-md">
  <Field.Set>
    <Field.Group>
      <Field.Field>
        <Field.Label for="username">Username</Field.Label>
        <Input id="username" type="text" placeholder="Max Leiter" />
        <Field.Description
          >Choose a unique username for your account.</Field.Description
        >
      </Field.Field>
      <Field.Field>
        <Field.Label for="password">Password</Field.Label>
        <Field.Description
          >Must be at least 8 characters long.</Field.Description
        >
        <Input id="password" type="password" placeholder="********" />
      </Field.Field>
    </Field.Group>
  </Field.Set>
</div>
```

### Textarea

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<div class="w-full max-w-md">
  <Field.Set>
    <Field.Group>
      <Field.Field>
        <Field.Label for="feedback">Feedback</Field.Label>
        <Textarea
          id="feedback"
          placeholder="Your feedback helps us improve..."
          rows={4}
        />
        <Field.Description
          >Share your thoughts about our service.</Field.Description
        >
      </Field.Field>
    </Field.Group>
  </Field.Set>
</div>
```

### Select

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import * as Select from "$lib/components/ui/select/index.js";
  let department = $state<string>();
  const departments = [
    { value: "engineering", label: "Engineering" },
    { value: "design", label: "Design" },
    { value: "marketing", label: "Marketing" },
    { value: "sales", label: "Sales" },
    { value: "support", label: "Customer Support" },
    { value: "hr", label: "Human Resources" },
    { value: "finance", label: "Finance" },
    { value: "operations", label: "Operations" }
 ];
  const departmentLabel = $derived(
    departments.find((d) => d.value === department)?.label ??
      "Choose department"
  );
</script>
<div class="w-full max-w-md">
  <Field.Field>
    <Field.Label for="department">Department</Field.Label>
    <Select.Root type="single" bind:value={department}>
      <Select.Trigger id="department">
        {departmentLabel}
      </Select.Trigger>
      <Select.Content>
        {#each departments as department (department.value)}
          <Select.Item {...department} />
        {/each}
      </Select.Content>
    </Select.Root>
    <Field.Description
      >Select your department or area of work.</Field.Description
    >
  </Field.Field>
</div>
```

### Slider

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Slider } from "$lib/components/ui/slider/index.js";
  let value = $state([200, 800]);
</script>
<div class="w-full max-w-md">
  <Field.Field>
    <Field.Label>Price Range</Field.Label>
    <Field.Description>
      Set your budget range ($<span class="font-medium tabular-nums"
        >{value[0]}</span
      >
      -
      <span class="font-medium tabular-nums">{value[1]}</span>).
    </Field.Description>
    <Slider
      type="multiple"
      bind:value
      max={1000}
      min={0}
      step={10}
      class="mt-2 w-full"
      aria-label="Price Range"
    />
  </Field.Field>
</div>
```

### Field Set

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
</script>
<div class="w-full max-w-md space-y-6">
  <Field.Set>
    <Field.Legend>Address Information</Field.Legend>
    <Field.Description
      >We need your address to deliver your order.</Field.Description
    >
    <Field.Group>
      <Field.Field>
        <Field.Label for="street">Street Address</Field.Label>
        <Input id="street" type="text" placeholder="123 Main St" />
      </Field.Field>
      <div class="grid grid-cols-2 gap-4">
        <Field.Field>
          <Field.Label for="city">City</Field.Label>
          <Input id="city" type="text" placeholder="New York" />
        </Field.Field>
        <Field.Field>
          <Field.Label for="zip">Postal Code</Field.Label>
          <Input id="zip" type="text" placeholder="90502" />
        </Field.Field>
      </div>
    </Field.Group>
  </Field.Set>
</div>
```

### Checkbox

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
<div class="w-full max-w-md">
  <Field.Group>
    <Field.Set>
      <Field.Legend variant="label"
        >Show these items on the desktop</Field.Legend
      >
      <Field.Description
        >Select the items you want to show on the desktop.</Field.Description
      >
      <Field.Group class="gap-3">
        <Field.Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-hard-disks-ljj" checked />
          <Field.Label for="finder-pref-9k2-hard-disks-ljj" class="font-normal">
            Hard disks
          </Field.Label>
        </Field.Field>
        <Field.Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-external-disks-1yg" />
          <Field.Label
            for="finder-pref-9k2-external-disks-1yg"
            class="font-normal"
          >
            External disks
          </Field.Label>
        </Field.Field>
        <Field.Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
          <Field.Label for="finder-pref-9k2-cds-dvds-fzt" class="font-normal">
            CDs, DVDs, and iPods
          </Field.Label>
        </Field.Field>
        <Field.Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
          <Field.Label
            for="finder-pref-9k2-connected-servers-6l2"
            class="font-normal"
          >
            Connected servers
          </Field.Label>
        </Field.Field>
      </Field.Group>
    </Field.Set>
    <Field.Separator />
    <Field.Field orientation="horizontal">
      <Checkbox id="finder-pref-9k2-sync-folders-nep" checked />
      <Field.Content>
        <Field.Label for="finder-pref-9k2-sync-folders-nep">
          Sync Desktop & Documents folders
        </Field.Label>
        <Field.Description>
          Your Desktop & Documents folders are being synced with iCloud Drive.
          You can access them from other devices.
        </Field.Description>
      </Field.Content>
    </Field.Field>
  </Field.Group>
</div>
```

### Radio

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
  let plan = $state("monthly");
</script>
<div class="w-full max-w-md">
  <Field.Set>
    <Field.Label>Subscription Plan</Field.Label>
    <Field.Description
      >Yearly and lifetime plans offer significant savings.</Field.Description
    >
    <RadioGroup.Root bind:value={plan}>
      <Field.Field orientation="horizontal">
        <RadioGroup.Item value="monthly" id="plan-monthly" />
        <Field.Label for="plan-monthly" class="font-normal">
          Monthly ($9.99/month)
        </Field.Label>
      </Field.Field>
      <Field.Field orientation="horizontal">
        <RadioGroup.Item value="yearly" id="plan-yearly" />
        <Field.Label for="plan-yearly" class="font-normal">
          Yearly ($99.99/year)
        </Field.Label>
      </Field.Field>
      <Field.Field orientation="horizontal">
        <RadioGroup.Item value="lifetime" id="plan-lifetime" />
        <Field.Label for="plan-lifetime" class="font-normal">
          Lifetime ($299.99)
        </Field.Label>
      </Field.Field>
    </RadioGroup.Root>
  </Field.Set>
</div>
```

### Switch

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
<div class="w-full max-w-md">
  <Field.Field orientation="horizontal">
    <Field.Content>
      <Field.Label for="2fa">Multi-factor authentication</Field.Label>
      <Field.Description>
        Enable multi-factor authentication. If you do not have a two-factor
        device, you can use a one-time code sent to your email.
      </Field.Description>
    </Field.Content>
    <Switch id="2fa" />
  </Field.Field>
</div>
```

### Choice Card

Wrap `Field` components inside `FieldLabel` to create selectable field groups. This works with `RadioItem`, `Checkbox` and `Switch` components.

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
  let computeEnvironment = $state("kubernetes");
</script>
<div class="w-full max-w-md">
  <Field.Group>
    <Field.Set>
      <Field.Label for="compute-environment-p8w"
        >Compute Environment</Field.Label
      >
      <Field.Description
        >Select the compute environment for your cluster.</Field.Description
      >
      <RadioGroup.Root bind:value={computeEnvironment}>
        <Field.Label for="kubernetes-r2h">
          <Field.Field orientation="horizontal">
            <Field.Content>
              <Field.Title>Kubernetes</Field.Title>
              <Field.Description>
                Run GPU workloads on a K8s configured cluster.
              </Field.Description>
            </Field.Content>
            <RadioGroup.Item value="kubernetes" id="kubernetes-r2h" />
          </Field.Field>
        </Field.Label>
        <Field.Label for="vm-z4k">
          <Field.Field orientation="horizontal">
            <Field.Content>
              <Field.Title>Virtual Machine</Field.Title>
              <Field.Description>
                Access a VM configured cluster to run GPU workloads.
              </Field.Description>
            </Field.Content>
            <RadioGroup.Item value="vm" id="vm-z4k" />
          </Field.Field>
        </Field.Label>
      </RadioGroup.Root>
    </Field.Set>
  </Field.Group>
</div>
```

### Field Group

Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
<div class="w-full max-w-md">
  <Field.Group>
    <Field.Set>
      <Field.Label>Responses</Field.Label>
      <Field.Description>
        Get notified when ChatGPT responds to requests that take time, like
        research or image generation.
      </Field.Description>
      <Field.Group data-slot="checkbox-group">
        <Field.Field orientation="horizontal">
          <Checkbox id="push" checked disabled />
          <Field.Label for="push" class="font-normal"
            >Push notifications</Field.Label
          >
        </Field.Field>
      </Field.Group>
    </Field.Set>
    <Field.Separator />
    <Field.Set>
      <Field.Label>Tasks</Field.Label>
      <Field.Description>
        Get notified when tasks you've created have updates.
        <a href="#/">Manage tasks</a>
      </Field.Description>
      <Field.Group data-slot="checkbox-group">
        <Field.Field orientation="horizontal">
          <Checkbox id="push-tasks" />
          <Field.Label for="push-tasks" class="font-normal">
            Push notifications
          </Field.Label>
        </Field.Field>
        <Field.Field orientation="horizontal">
          <Checkbox id="email-tasks" />
          <Field.Label for="email-tasks" class="font-normal">
            Email notifications
          </Field.Label>
        </Field.Field>
      </Field.Group>
    </Field.Set>
  </Field.Group>
</div>
```

### Responsive Layout

- Vertical fields: Default orientation stacks label, control, and helper textideal 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.

```svelte
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<div class="w-full max-w-4xl">
  <form>
    <Field.Set>
      <Field.Legend>Profile</Field.Legend>
      <Field.Description>Fill in your profile information.</Field.Description>
      <Field.Separator />
      <Field.Group>
        <Field.Field orientation="responsive">
          <Field.Content>
            <Field.Label for="name">Name</Field.Label>
            <Field.Description>
              Provide your full name for identification
            </Field.Description>
          </Field.Content>
          <Input id="name" placeholder="Evil Rabbit" required />
        </Field.Field>
        <Field.Separator />
        <Field.Field orientation="responsive">
          <Field.Content>
            <Field.Label for="message">Message</Field.Label>
            <Field.Description>
              You can write your message here. Keep it short, preferably under
              100 characters.
            </Field.Description>
          </Field.Content>
          <Textarea
            id="message"
            placeholder="Hello, world!"
            required
            class="min-h-[100px] resize-none sm:min-w-[300px]"
          />
        </Field.Field>
        <Field.Separator />
        <Field.Field orientation="responsive">
          <Button type="submit">Submit</Button>
          <Button type="button" variant="outline">Cancel</Button>
        </Field.Field>
      </Field.Group>
    </Field.Set>
  </form>
</div>
```

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

```svelte
<Field.Field data-invalid>
  <Field.Label for="email">Email</Field.Label>
  <Input id="email" type="email" aria-invalid />
  <Field.Error>Enter a valid email address.</Field.Error>
</Field.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.</article></body></html>