Skip to content
FelicityUI

Field

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

Profile

This appears on invoices and emails.

This appears on invoices and emails.

Installation

terminal
npx felicityui add field --platform react

Usage

example.tsx
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" placeholder="Evil Rabbit" />
    </Field>
  </FieldGroup>
</FieldSet>

Composition

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    ├── Field
    │   ├── FieldLabel
    │   ├── Input
    │   ├── FieldDescription
    │   └── FieldError
    └── Field

Default

FieldSet with legend, group, input, error, and horizontal switch.

Profile

This appears on invoices and emails.

This appears on invoices and emails.

Input

We never share your email.

Textarea

One or two sentences.

Select

Slider

Applied to the preview layer.

Fieldset

Address

Used for shipping labels.

Checkbox

Notifications

Product updates and tips.

Critical account alerts only.

Radio

Plan

Switch

Disables radios on this device.

Choice card

Wrap Field inside FieldLabel for selectable cards.

Field group

Or

Responsive

Shown on your public profile.

RTL

الملف الشخصي

يظهر على الفواتير والرسائل.

API Reference

PropTypeDefaultDescription
orientation"vertical" | "horizontal" | "responsive"—Field layout orientation.
variant"legend" | "label"—FieldLegend sizing variant.
errorsArray<{ message?: string } | undefined>—FieldError list from form libraries.
fieldVariants({ orientation?, className? }) => string—Exported class helper for Field.

Accessibility

WCAG 2.2 AA

  • FieldSet and FieldLegend group related controls.
  • Field uses role=group.
  • FieldError uses role=alert.
  • Associate labels with controls via htmlFor.

Platform notes

React

Composition primitives with Felicity semantic tokens. FieldSet/FieldGroup/Field shells — not Base UI / Radix runtime.

  • Client component (FieldError memoizes error lists).
  • Uses data-slot=field|field-set|field-group|field-label|field-description|field-error|field-content|field-legend|field-separator.
  • orientation vertical|horizontal|responsive; data-invalid for error styling.
  • Depends on label and separator registry items.