Field

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download field -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";
<Field className="w-full max-w-sm" orientation="vertical">
  <FieldLabel>Email</FieldLabel>
  <FieldDescription>Use your work email.</FieldDescription>
</Field>;

Props API

Subcomponents

• FieldSet
• FieldLegend
• FieldGroup
• FieldContent
• FieldLabel
• FieldTitle
• FieldDescription
• FieldSeparator
• FieldError

Examples

Default

import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";
<Field className="w-full max-w-sm" >
  <FieldLabel>Email</FieldLabel>
  <FieldDescription>Use your work email.</FieldDescription>
</Field>;

With Input

import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" placeholder="you@example.com" />
  <FieldDescription>We&apos;ll never share your email.</FieldDescription>
</Field>;

With Error

import { Field, FieldLabel, FieldError } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<Field data-invalid className="w-full max-w-sm">
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" aria-invalid placeholder="Choose a username" />
  <FieldError>This username is already taken.</FieldError>
</Field>;

Horizontal

import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<Field orientation="horizontal" className="w-full max-w-sm">
  <FieldLabel htmlFor="newsletter">Subscribe to newsletter</FieldLabel>
  <Input id="newsletter" type="checkbox" className="size-4" />
</Field>;

Group

import {
  FieldGroup,
  Field,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<FieldGroup className="w-full max-w-sm">
  <Field>
    <FieldLabel htmlFor="first">First name</FieldLabel>
    <Input id="first" placeholder="Ada" />
  </Field>
  <FieldSeparator />
  <Field>
    <FieldLabel htmlFor="last">Last name</FieldLabel>
    <Input id="last" placeholder="Lovelace" />
  </Field>
</FieldGroup>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Field

FieldError

FieldLegend

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.