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

#Usage

// { 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. 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, Field, Schema: field types