Field

import { Field, FieldLabel, FieldDescription, FieldError, Input } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <Field label="Email" description="We'll never share your email." required>
        <Input type="email" placeholder="you@example.com" />
      </Field>
      <Field label="Username" error="Username is already taken.">
        <Input placeholder="johndoe" />
      </Field>
      <div className="flex flex-col gap-1.5">
        <FieldLabel required>Custom label</FieldLabel>
        <Input placeholder="value" />
        <FieldDescription>Some helper text</FieldDescription>
        <FieldError>Validation error message</FieldError>
      </div>
    </div>
  )
}