Field

A field component that combines label, input, description, and error message.

1. Import

Import the field components from the design system.

import {
  Field,
  FieldControl,
  FieldDescription,
  FieldLabel,
  FieldMessage,
} from "@/design-system/components/ui/field"

2. Props

Field component props.

Prop	Type	Default
className	string	--

3. Usages

Common field patterns and configurations.

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/design-system/components/ui/field";
import { Input } from "@/design-system/components/ui/input";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <FieldContent>
        <Input id="email" type="email" placeholder="m@example.com" />
      </FieldContent>
      <FieldDescription>We&apos;ll never share your email.</FieldDescription>
    </Field>
  );
}