Field

Import

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@timelycare/helix-ui"

Props

interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
  orientation?: "vertical" | "horizontal" | "responsive"
  className?: string
  children: React.ReactNode
}

interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor?: string
  className?: string
  children: React.ReactNode
}

interface FieldDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string
  children: React.ReactNode
}

interface FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string
  children: React.ReactNode
}

interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children: React.ReactNode
}

interface FieldSetProps extends React.HTMLAttributes<HTMLFieldSetElement> {
  className?: string
  children: React.ReactNode
}

interface FieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {
  variant?: "default" | "label"
  className?: string
  children: React.ReactNode
}

interface FieldContentProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children: React.ReactNode
}

interface FieldTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string
  children: React.ReactNode
}

interface FieldSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
}

Styling

Typography

Spacing

Orientation

Sub-Components

Common Patterns

Basic Input Field

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="Enter username" />
  <FieldDescription>Choose a unique username for your account.</FieldDescription>
</Field>

With Validation Error

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input
    id="email"
    placeholder="m@example.com"
    className="border-destructive focus-visible:ring-destructive/50"
  />
  <FieldError>Please enter a valid email address.</FieldError>
</Field>

Grouped Fields with FieldSet

<FieldSet>
  <FieldLegend>Address Information</FieldLegend>
  <FieldDescription>We need your address to deliver your order.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="street">Street Address</FieldLabel>
      <Input id="street" placeholder="123 Main St" />
    </Field>
    <div className="grid grid-cols-2 gap-4">
      <Field>
        <FieldLabel htmlFor="city">City</FieldLabel>
        <Input id="city" placeholder="New York" />
      </Field>
      <Field>
        <FieldLabel htmlFor="zip">Postal Code</FieldLabel>
        <Input id="zip" placeholder="90502" />
      </Field>
    </div>
  </FieldGroup>
</FieldSet>

Horizontal Checkbox

<Field orientation="horizontal">
  <Checkbox id="terms" />
  <FieldLabel htmlFor="terms" className="font-normal">
    I agree to the terms and conditions
  </FieldLabel>
</Field>

Checkbox Group with FieldSet

<FieldSet>
  <FieldLegend variant="label">Notification Preferences</FieldLegend>
  <FieldDescription>Select how you'd like to be notified.</FieldDescription>
  <FieldGroup className="gap-3">
    <Field orientation="horizontal">
      <Checkbox id="email-notif" />
      <FieldLabel htmlFor="email-notif" className="font-normal">Email</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="sms-notif" />
      <FieldLabel htmlFor="sms-notif" className="font-normal">SMS</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Responsive Layout

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>Fill in your profile information.</FieldDescription>
  <FieldSeparator />
  <FieldGroup>
    <Field orientation="responsive">
      <FieldContent>
        <FieldLabel htmlFor="name">Name</FieldLabel>
        <FieldDescription>Provide your full name</FieldDescription>
      </FieldContent>
      <Input id="name" placeholder="Jane Doe" required />
    </Field>
    <FieldSeparator />
    <Field orientation="responsive">
      <FieldContent>
        <FieldLabel htmlFor="bio">Bio</FieldLabel>
        <FieldDescription>Keep it under 100 characters.</FieldDescription>
      </FieldContent>
      <Textarea id="bio" placeholder="Tell us about yourself" className="resize-none" />
    </Field>
  </FieldGroup>
</FieldSet>

Selectable Radio Card

<FieldSet>
  <FieldLabel htmlFor="plan">Choose a Plan</FieldLabel>
  <RadioGroup defaultValue="basic">
    <FieldLabel htmlFor="basic">
      <Field orientation="horizontal" className="rounded-lg bg-input-bg">
        <FieldContent>
          <FieldTitle>Basic</FieldTitle>
          <FieldDescription>Great for getting started.</FieldDescription>
        </FieldContent>
        <RadioGroupItem value="basic" id="basic" />
      </Field>
    </FieldLabel>
    <FieldLabel htmlFor="pro">
      <Field orientation="horizontal" className="rounded-lg bg-input-bg">
        <FieldContent>
          <FieldTitle>Pro</FieldTitle>
          <FieldDescription>For power users and teams.</FieldDescription>
        </FieldContent>
        <RadioGroupItem value="pro" id="pro" />
      </Field>
    </FieldLabel>
  </RadioGroup>
</FieldSet>

Accessibility

• FieldLabel renders a <label> with htmlFor association to the input
• FieldSet renders a semantic <fieldset> element
• FieldLegend renders a <legend> for the fieldset
• FieldDescription should be linked via aria-describedby on the input
• FieldError should be linked via aria-describedby and the input should have aria-invalid="true"
• Keyboard: Tab moves between fields; Space/Enter activates checkboxes and radios

Gotchas

See Also

• Related Components: Form (React Hook Form integration), Input, Checkbox, Radio Group, Select, Label
• Tokens: Colors — Destructive color for errors, muted-foreground for descriptions

Last updated: February 24, 2026