> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# Field

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

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx shadcn-svelte@next add field
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Copy component code">
        Copy and paste the component source code into your project.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

```svelte theme={null}
<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
</script>
```

```svelte theme={null}
<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 theme={null}
<Field.Field>
  <Field.Label for="input-id">Label</Field.Label>
  <!-- Input, Select, Switch, etc. -->
  <Field.Description>Optional helper text.</Field.Description>
  <Field.Error>Validation message.</Field.Error>
</Field.Field>
```

* `Field.Field` is the core wrapper for a single field.
* `Field.Content` is a flex column that groups label and description. Not required if you have no description.
* Wrap related fields with `Field.Group`, and use `Field.Set` with `Field.Legend` for semantic grouping.

## Examples

### Input

Example showing field with input component.

### Textarea

Example showing field with textarea component.

### Select

Example showing field with select component.

### Slider

Example showing field with slider component.

### Fieldset

Example showing field with fieldset.

### Checkbox

Example showing field with checkbox component.

### Radio

Example showing field with radio component.

### Switch

Example showing field with switch component.

### 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 `Field.Group`. Add `Field.Separator` 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 `Field.Content` to keep descriptions aligned.
* **Responsive fields:** Set `orientation="responsive"` for automatic column layouts inside container-aware parents. Apply `@container/field-group` classes on `Field.Group` 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.

```svelte theme={null}
<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

* `Field.Set` and `Field.Legend` keep related controls grouped for keyboard and assistive tech users.
* `Field` outputs `role="group"` so nested controls inherit labeling from `Field.Label` and `Field.Legend` when combined.
* Apply `Field.Separator` sparingly to ensure screen readers encounter clear section boundaries.