Field

Email

Enter your email address

I agree to the terms and conditions

---
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<div class="w-full max-w-sm space-y-6">
  <Field orientation="vertical">
    <FieldLabel>
      <FieldTitle>Email</FieldTitle>
      <FieldDescription>Enter your email address</FieldDescription>
    </FieldLabel>
    <FieldContent>
      <Input type="email" placeholder="email@example.com" />
    </FieldContent>
  </Field>
  <Field orientation="horizontal">
    <FieldLabel for="terms">
      <Checkbox id="terms" />
      I agree to the terms and conditions
    </FieldLabel>
  </Field>
</div>

Installation

To install the field component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/field

Usage

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"

<Field orientation="vertical">
  <FieldLabel>
    <FieldTitle>Label</FieldTitle>
  </FieldLabel>
  <FieldContent>
    <Input type="text" />
  </FieldContent>
</Field>