Field

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

Basic Forms

Simple form fields with labels, inputs, and descriptions using vertical layout (default).

Choose a unique username for your account.
We'll never share your email with anyone else.
Must be at least 8 characters long.
Brief description for your profile. Maximum 500 characters.

Validation Examples

Display error states and validation messages using FieldError.

Username is already taken. Please choose another.
• Password must be at least 8 characters long
• Password must contain at least one uppercase letter
• Password must contain at least one number
Please enter a valid email address.

Horizontal Orientation

Place labels beside controls using horizontal orientation.

Enter your first and last name.
I agree to the terms and conditions

Responsive Orientation

Automatically switch from vertical to horizontal at medium breakpoint using container queries.

Your company or organization name.

Field Groups

Stack multiple fields using FieldGroup for consistent spacing.

Or continue with

Complex Fieldsets

Use FieldSet and FieldLegend for semantic grouping of related controls.

Contact Information
How would you like to receive notifications?
We'll send important updates to your preferred channel.
User Profile
This will be your public display name.
Brief bio for your profile. Maximum 500 characters.

Field with Title

Use FieldTitle for headings within FieldContent.

Email Notifications
Choose which emails you want to receive.

Usage Notes

Key Features

  • Flexible layout with vertical, horizontal, and responsive orientations
  • Automatic error state styling via data-invalid attribute
  • Proper role="group" for accessibility
  • Support for descriptions and multiple error messages
  • FieldSet and FieldLegend for semantic grouping
  • FieldGroup for consistent spacing of multiple fields
  • FieldSeparator for visual section dividers
  • Container query support for responsive layouts

Components

  • Field - Main container with orientation support
  • FieldLabel - Label element with for attribute
  • FieldContent - Flex column wrapper for controls and descriptions
  • FieldDescription - Helper text with muted styling
  • FieldError - Error message container with destructive styling
  • FieldSet - Semantic fieldset element for grouping
  • FieldLegend - Legend for fieldsets with variant options
  • FieldGroup - Layout wrapper for stacking fields
  • FieldSeparator - Visual divider with optional centered content
  • FieldTitle - Title element for complex field layouts
  • FieldSeparator - Visual divider between sections

Accessibility

  • Use FieldLabel with proper 'for' attribute to associate with inputs
  • FieldDescription should have an ID for aria-describedby
  • FieldError should have an ID for aria-describedby on invalid inputs
  • FieldSet provides semantic grouping for related controls
  • All components render proper semantic HTML elements
An unhandled error has occurred. Reload 🗙