Skip to Content
ComponentsField

Field

A composable form field that combines a label, control, description, and error message. Designed for building accessible forms without a form library dependency.

We’ll never share your email with anyone.

import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" placeholder="name@example.com" />
  <FieldDescription>Enter your email address.</FieldDescription>
</Field>

Examples

Default

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="johndoe" />
</Field>

With description

This is your public display name.

<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="johndoe" />
  <FieldDescription>This is your public display name.</FieldDescription>
</Field>

With error

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" placeholder="name@example.com" aria-invalid />
  <FieldError>Please enter a valid email address.</FieldError>
</Field>

Required

Must be at least 8 characters.

<Field>
  <FieldLabel htmlFor="password" required>Password</FieldLabel>
  <Input id="password" type="password" />
  <FieldDescription>Must be at least 8 characters.</FieldDescription>
</Field>

Form example

We’ll never share your email.

<form className="space-y-4">
  <Field>
    <FieldLabel htmlFor="name" required>Full name</FieldLabel>
    <Input id="name" placeholder="John Doe" />
  </Field>
  <Field>
    <FieldLabel htmlFor="email" required>Email</FieldLabel>
    <Input id="email" type="email" placeholder="name@example.com" />
    <FieldDescription>We'll never share your email.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel htmlFor="password" required>Password</FieldLabel>
    <Input id="password" type="password" />
    <FieldError>Password must be at least 8 characters.</FieldError>
  </Field>
  <Button type="submit" className="w-full">Create account</Button>
</form>
Last updated on
Toggle GroupInput