---
title: DatePicker
description: A styled native date input for date fields.
preview: date-picker
---
# DatePicker

`<input type="date">` with Mirio's control styling. `Field` renders it for `date`. No custom calendar: the native one is accessible, localized and works on phones.

## Preview
<!-- preview: date-picker -->

## Usage
```tsx
// { key: 'preferred_date', type: 'date', label: 'Preferred date', min: '2026-01-01' }
import { Form } from '@trymirio/mirio';

<Form schema={booking} client={mirio} />
```

The value is an ISO date string (`YYYY-MM-DD`). `min`/`max` on the field are ISO strings and are enforced both as native attributes and on submit.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | required | The field key. |
| `className` | `string` | control classes + `appearance-none` | Merged onto the `<input>`. |
| …`<input>` attributes | | | Everything except `name`, `value`, `onChange`, `type`. `min`, `max` and `autocomplete` default to the schema's values. |

Renders `<input type="date" data-mirio="date">`.

## Variants and states
Required, error, disabled as for [Input](/docs/components/input.md#variants-and-states). Prefill with `defaultValue: '2026-03-01'` or `prefill: { query: 'date' }`.

## Customization
- Same tokens as Input. The picker icon and popup are the browser's; `color-scheme: dark` on a dark wrapper switches them.
- CSS hook: `[data-mirio="date"]`.
- For a custom calendar, use `useField(name)` from `@trymirio/mirio/headless` and set an ISO string with `setValue`.

## Accessibility
Native date input semantics and keyboard handling; labelled and described like every other control.

## Related
[Input](/docs/components/input.md), [Field](/docs/components/field.md), [Schema: field types](/docs/schema.md)