Field

Groups a label, input, description, and error message.

DocsAPI Reference
import { Field, FieldLabel } from "@/components/ui/field/field";
import { Input } from "@/components/ui/input/input";
import styles from "./field-demo.module.css";

export default function FieldDemo() {
  return (
    <Field className={styles.field}>
      <FieldLabel>Email</FieldLabel>
      <Input placeholder="Enter your email" />
    </Field>
  );
}


npx shadcn@latest add @roiui/field
npx shadcn@latest add @roiui/field-tailwind

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