Field

Field wraps a form control with a label, optional description, and error message. Use for all labeled form controls to ensure consistent layout and accessibility.

Basic usage

Code

<FieldGroup>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" type="email" placeholder="you@example.com" />
    <FieldDescription>We&apos;ll never share your email.</FieldDescription>
  </Field>

  <Field>
    <FieldLabel htmlFor="password">Password</FieldLabel>
    <Input id="password" type="password" />
    <FieldError>Password must be at least 8 characters.</FieldError>
  </Field>
</FieldGroup>

Validation

Connect descriptions and errors with aria-describedby, and set aria-invalid when the control is invalid.

Code

<Field>
  <FieldLabel htmlFor="account-email">Email</FieldLabel>
  <Input
    id="account-email"
    type="email"
    aria-invalid="true"
    aria-describedby="account-email-error"
  />
  <FieldError id="account-email-error">Enter a valid email address.</FieldError>
</Field>

Horizontal

Code

<FieldGroup>
  <Field orientation="horizontal">
    <FieldLabel htmlFor="h-email">Email</FieldLabel>
    <Input id="h-email" type="email" placeholder="you@example.com" />
  </Field>

  <Field orientation="horizontal">
    <FieldLabel htmlFor="h-name">Name</FieldLabel>
    <Input id="h-name" placeholder="Your name" />
  </Field>
</FieldGroup>

With Checkboxes

Code

<FieldSet>
  <FieldLegend className="tw:text-base tw:font-medium">
    Notifications
  </FieldLegend>

  <FieldGroup className="tw:gap-3">
    <Field orientation="horizontal">
      <Checkbox id="email-notif" />
      <FieldLabel htmlFor="email-notif">Email notifications</FieldLabel>
    </Field>

    <Field orientation="horizontal">
      <Checkbox id="sms-notif" />
      <FieldLabel htmlFor="sms-notif">SMS notifications</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Use FieldContent when a checkbox or radio option needs a title plus supporting description.

Code

<Field orientation="horizontal">
  <Checkbox id="marketing" />
  <FieldLabel htmlFor="marketing">
    <FieldContent>
      <FieldTitle>Email marketing</FieldTitle>
      <FieldDescription>Receive campaign updates.</FieldDescription>
    </FieldContent>
  </FieldLabel>
</Field>

With Radio

Code

<FieldSet>
  <FieldLegend className="tw:text-base tw:font-medium">
    Fulfillment speed
  </FieldLegend>

  <RadioGroup defaultValue="standard">
    <Field orientation="horizontal">
      <RadioGroupItem id="standard" value="standard" />
      <FieldLabel htmlFor="standard">Standard</FieldLabel>
    </Field>

    <Field orientation="horizontal">
      <RadioGroupItem id="rush" value="rush" />
      <FieldLabel htmlFor="rush">Rush</FieldLabel>
    </Field>

    <Field orientation="horizontal">
      <RadioGroupItem id="scheduled" value="scheduled" />
      <FieldLabel htmlFor="scheduled">Scheduled</FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>

API

Field

Name	Type/Description
orientation = "vertical"	"horizontal" | "vertical" | "responsive" | null | undefined

FieldContent

No documented props

FieldDescription

No documented props

FieldError

Name	Type/Description
errors	({ message?: string | undefined; } | undefined)[] | undefined

FieldGroup

No documented props

FieldLabel

No documented props

FieldLegend

Name	Type/Description
variant = "legend"	"label" | "legend" | undefined

FieldSeparator

No documented props

FieldSet

No documented props

FieldTitle

No documented props