Field

Composable components for building accessible form layouts with labels, controls, descriptions, and error messages.

Examples

Basic Text Input

Email We'll never share your email. 
<c-field style="max-width: 400px;">
  <c-label data-slot="field-label" for="field-email">Email</c-label>
  <c-input
    id="field-email"
    type="email"
    placeholder="you@example.com"
  ></c-input>
  <c-field-description>We'll never share your email.</c-field-description>
</c-field>

With Validation Error

Username admin Username is already taken. 
<c-field invalid style="max-width: 400px;">
  <c-label data-slot="field-label" for="field-username">Username</c-label>
  <c-input
    id="field-username"
    type="text"
    value="admin"
    aria-invalid="true"
  ></c-input>
  <c-field-error>Username is already taken.</c-field-error>
</c-field>

Textarea Field

Bio Brief description for your profile. Max 250 characters. 
<c-field style="max-width: 400px;">
  <c-label data-slot="field-label" for="field-bio">Bio</c-label>
  <c-textarea
    id="field-bio"
    rows="4"
    placeholder="Tell us about yourself..."
  ></c-textarea>
  <c-field-description
    >Brief description for your profile. Max 250
    characters.</c-field-description
  >
</c-field>

Horizontal Orientation

Company 
<c-field orientation="horizontal" style="max-width: 500px;">
  <c-label data-slot="field-label" for="field-company" style="width: 120px;"
    >Company</c-label
  >
  <c-input id="field-company" type="text" placeholder="Acme Inc."></c-input>
</c-field>

Field Group with Separator

First Name Last Name Email 
<c-field-group class="w-full block" style="max-width: 400px;">
  <c-field>
    <c-label data-slot="field-label" for="field-first-name">First Name</c-label>
    <c-input id="field-first-name" type="text" placeholder="John"></c-input>
  </c-field>
  <c-field>
    <c-label data-slot="field-label" for="field-last-name">Last Name</c-label>
    <c-input id="field-last-name" type="text" placeholder="Doe"></c-input>
  </c-field>
  <c-field-separator></c-field-separator>
  <c-field>
    <c-label data-slot="field-label" for="field-email-secondary">Email</c-label>
    <c-input
      id="field-email-secondary"
      type="email"
      placeholder="john@example.com"
    ></c-input>
  </c-field>
</c-field-group>

Checkbox Group with Fieldset

Notifications Choose which notifications you want to receive.
Email notifications
SMS notifications
Push notifications 
<c-field-set class="w-full block" style="max-width: 400px;">
  <c-field-legend>Notifications</c-field-legend>
  <c-field-description
    >Choose which notifications you want to receive.</c-field-description
  >
  <div class="flex flex-col gap-3 mt-4">
    <div class="flex items-center gap-2">
      <c-checkbox id="notifications-email" checked></c-checkbox>
      <c-label label-for="notifications-email">Email notifications</c-label>
    </div>
    <div class="flex items-center gap-2">
      <c-checkbox id="notifications-sms"></c-checkbox>
      <c-label label-for="notifications-sms">SMS notifications</c-label>
    </div>
    <div class="flex items-center gap-2">
      <c-checkbox id="notifications-push" checked></c-checkbox>
      <c-label label-for="notifications-push">Push notifications</c-label>
    </div>
  </div>
</c-field-set>

Radio Group with Fieldset

Plan Select your subscription plan.
Free - $0/month
Pro - $10/month
Enterprise - $50/month 
<c-field-set class="w-full block" style="max-width: 400px;">
  <c-field-legend>Plan</c-field-legend>
  <c-field-description>Select your subscription plan.</c-field-description>
  <c-radio-group value="free" radio-group-classes="flex flex-col gap-3 mt-4">
    <div class="flex items-center gap-2">
      <c-radio-group-item id="plan-free" value="free"></c-radio-group-item>
      <c-label label-for="plan-free">Free - $0/month</c-label>
    </div>
    <div class="flex items-center gap-2">
      <c-radio-group-item id="plan-pro" value="pro"></c-radio-group-item>
      <c-label label-for="plan-pro">Pro - $10/month</c-label>
    </div>
    <div class="flex items-center gap-2">
      <c-radio-group-item
        id="plan-enterprise"
        value="enterprise"
      ></c-radio-group-item>
      <c-label label-for="plan-enterprise">Enterprise - $50/month</c-label>
    </div>
  </c-radio-group>
</c-field-set>

Responsive Layout

Full Name 
<c-field-group class="w-full block" style="max-width: 600px;">
  <c-field orientation="responsive">
    <c-label
      data-slot="field-label"
      for="field-full-name"
      style="min-width: 120px;"
      >Full Name</c-label
    >
    <c-input id="field-full-name" type="text" placeholder="John Doe"></c-input>
  </c-field>
</c-field-group>

API Reference

Field

Main wrapper component for form fields with orientation and validation support.

Prop Type Default Description
orientation string vertical Layout orientation: "vertical", "horizontal", or "responsive"
invalid boolean false Marks field as invalid for validation state
field-classes string - Additional CSS classes for customization

FieldLabel

Label element for form fields with accessibility support.

Prop Type Default Description
field-label-classes string - Additional CSS classes for customization

FieldDescription

Helper text element for providing additional context.

Prop Type Default Description
field-description-classes string - Additional CSS classes for customization

FieldError

Error message element for validation feedback.

Prop Type Default Description
field-error-classes string - Additional CSS classes for customization

FieldContent

Flex column wrapper for grouping label and description.

Prop Type Default Description
field-content-classes string - Additional CSS classes for customization

FieldGroup

Container for grouping multiple fields with container query support.

Prop Type Default Description
field-group-classes string - Additional CSS classes for customization

FieldSeparator

Visual divider for separating field groups.

Prop Type Default Description
field-separator-classes string - Additional CSS classes for customization

FieldSet

Semantic fieldset wrapper for grouping related form controls.

Prop Type Default Description
field-set-classes string - Additional CSS classes for customization

FieldLegend

Legend element for fieldset titles.

Prop Type Default Description
field-legend-classes string - Additional CSS classes for customization

Accessibility

  • Field uses role="group" for semantic grouping
  • FieldLabel creates proper label associations
  • FieldSet/FieldLegend provide semantic grouping for related controls
  • Error messages are linked to form controls for screen readers
  • All components support keyboard navigation

Usage Notes

  • Use FieldSet/FieldLegend for semantic grouping (checkbox/radio groups)
  • Use FieldGroup for layout grouping of multiple fields
  • Coordinate invalid prop on Field with aria-invalid on input elements
  • Use FieldContent to group label and description together
  • Container query (@container/field-group) enables responsive layouts