Field

A complete form field component with label, description, and error handling.

We'll never share your email with anyone else

import { Field, FieldControl, FieldLabel, FieldDescription } from "@/components/ui/field/field";
import styles from "./field-demo.module.css";

export default function FieldDemo() {
  return (
    <Field className={styles.field}>
      <FieldLabel>Email</FieldLabel>
      <FieldControl type="email" placeholder="Enter your email" />
      <FieldDescription>We&apos;ll never share your email with anyone else</FieldDescription>
    </Field>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/field.json

Anatomy

anatomy
import {
Field,
FieldControl,
FieldLabel,
FieldDescription,
FieldError,
} from '../ui/field'

<Field>
  <FieldLabel />
  <FieldDescription />
  <FieldControl />
  <FieldError />
</Field>