## Birthday Field (S—191)

A date-of-birth input as three typed fields (day, month, year) that auto-advance, validate the real date and show age.

- URL: https://sundaeui.dev/components/birthday-field
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/birthday-field.json`
- Tags: age, form, date-of-birth, birthday, input, validation

Separate fields avoid the scroll-through-decades date picker. Each auto-advances when complete, month accepts “3” or “Mar”, and invalid dates such as 31 April are caught with a plain message.
Once valid, it shows the age, and can enforce a minimum age.

### Usage

```tsx
import { BirthdayField } from '@/components/sundae/birthday-field'

<BirthdayField />
```

### Props

- `onValueChange` (`(iso: string | null) => void`): Called with YYYY-MM-DD when valid.
- `minAge` (`number`): Minimum age required.
- `order` (`'dmy' | 'mdy'`, default `'dmy'`): Field order.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Sign-up, age gates, insurance and health forms.

### When not to use

- Picking near dates like bookings: use a calendar.

### Accessibility

- A fieldset with a legend; each field is labelled and uses inputmode="numeric".
- Errors are linked with aria-describedby and announced.
- Reduced motion removes the movement and keeps every state change.