Field

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export default function FieldDemo() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend>Create Apple Account</FieldLegend>
      <FieldDescription>Use this account for iCloud, the App Store and more.</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="field-name">Name</FieldLabel>
          <Input id="field-name" placeholder="John Appleseed" />
        </Field>
        <Field data-invalid="true">
          <FieldLabel htmlFor="field-email">Email</FieldLabel>
          <Input id="field-email" defaultValue="john@" aria-invalid />
          <FieldError>Enter a valid email address.</FieldError>
        </Field>
        <FieldSeparator />
        <Field orientation="horizontal">
          <Checkbox id="field-news" defaultChecked />
          <FieldContent>
            <FieldLabel htmlFor="field-news">News and announcements</FieldLabel>
            <FieldDescription>Get the latest about products, services and software updates.</FieldDescription>
          </FieldContent>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}