Form Field

import { FormField, FormFieldHint, FormFieldGroup } from '@/components/ui/form-field'
import { Input } from '@/components/ui/input'

export default function Example() {
  const [errors, setErrors] = useState({})

  return (
    <>
      {/* Basic usage */}
      <FormField label="Email" description="We'll never share your email">
        <Input type="email" placeholder="Enter email" />
      </FormField>

      {/* With validation error */}
      <FormField
        label="Password"
        required
        error={errors.password}
      >
        <Input type="password" />
      </FormField>

      {/* With hint */}
      <FormField label="API Key">
        <Input type="password" />
      </FormField>
      <FormFieldHint>Find your API key in Settings.</FormFieldHint>

      {/* Grouped fields */}
      <FormFieldGroup legend="Address" description="Your shipping address">
        <FormField label="Street">
          <Input placeholder="123 Main St" />
        </FormField>
        <FormField label="City">
          <Input placeholder="New York" />
        </FormField>
      </FormFieldGroup>
    </>
  )
}