An input to type a date, with a calendar to pick it. The text is a date in the YYYY-MM-DD format, which is the same in every country.
Name the field with aria-label, or with a visible label.
Start with a date using initialValue. Use value and onChange to control it.
A date outside the range cannot be typed, and its day is disabled in the calendar.
Use filled, light, ghost or subtle with a type to change the surface of the field.
Use filled, light, ghost or subtle with a type to change the surface of the field.
Disable the input and the calendar button.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | selected date, to control the component | Date / null | - | - |
| initialValue | date at the start | Date / null | - | null |
| onChange | called with the date, or null when the text is emptied | (date: Date | null) => void | - | - |
| min | first date that can be picked | Date | - | - |
| max | last date that can be picked | Date | - | - |
| locale | language of the calendar | string | any Intl locale | en-US |
| weekStartsOn | first day of the week in the calendar, 0 is Sunday | number | 0 to 6 | 0 |
| placeholder | text shown when the input is empty | string | - | YYYY-MM-DD |
| calendarLabel | name of the calendar button and of its dialog | string | - | Choose date |
| disabled | disable the component | boolean | - | false |
| rounded | round the corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| type | color of the field | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | default |
| rounded | round the corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| ... | native props, passed to the input | InputHTMLAttributes | 'aria-label', 'name', ... | - |
The value changes only for a real date inside min and max. 2026-02-31 is not accepted. When the input loses the focus, it goes back to the last valid date. An empty text clears the value.
The ref points at the input.
The calendar button has aria-haspopup="dialog" and aria-expanded. The calendar opens in a dialog with the focus on the day of the current value. Escape closes it and puts the focus back on the button, and picking a day puts the focus on the input. See Calendar for the keys.