Field

​

Installation

npx shadcn-svelte@next add field

​

Usage

<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

<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

​

Textarea

​

Select

​

Slider

​

Fieldset

​

Checkbox

​

Radio

​

Switch

​

Choice Card

​

Field Group

​

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.

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