Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Installation
Copy and paste the component source files linked at the top of this page into your project.
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
The Field family is designed for composing accessible forms. A typical field is structured as follows:
<Field>
<FieldLabel for="input-id">Label</FieldLabel>
<!-- Input, Select, Switch, etc. -->
<FieldDescription>Optional helper text.</FieldDescription>
<FieldError>Validation message.</FieldError>
</Field> Fieldis the core wrapper for a single field.FieldContentis a flex column that groups label and description. Not required if you have no description.- Wrap related fields with
FieldGroup, and useFieldSetwithFieldLegendfor semantic grouping.
Examples
Input
Textarea
Select
Select your department or area of work.
Slider
Set your budget range ($200 - 800).
Field Set
Checkbox
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"onFieldto align the label and control side-by-side. Pair withFieldContentto keep descriptions aligned. - Responsive fields: Set
orientation="responsive"for automatic column layouts inside container-aware parents. Apply@container/field-groupclasses onFieldGroupto switch orientations at specific breakpoints.
Validation and Errors
- Add
data-invalidtoFieldto switch the entire block into an error state. - Add
aria-invalidon the input itself for assistive technologies. - Render
FieldErrorimmediately after the control or insideFieldContentto keep error messages aligned with the field. Copy
<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
FieldSetandFieldLegendkeep related controls grouped for keyboard and assistive tech users.Fieldoutputsrole="group"so nested controls inherit labeling fromFieldLabelandFieldLegendwhen combined.- Apply
FieldSeparatorsparingly to ensure screen readers encounter clear section boundaries.