Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Types

Date Input for React

A date field with a calendar icon, using the browser's date picker.

Framework
UI library

Dates are easy to mistype in a text field. This example uses an input with type date and a CalendarIcon in an InputGroupAddon, so people get the browser's date picker and the value is always a valid date. Use it for birthdays, deadlines and any single date where a full calendar would be too much.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does type date give this field?

The browser's date control: day, month and year segments in the visitor's locale order, and a calendar picker on most browsers. The value is always YYYY-MM-DD, such as 1990-05-21, whatever the display.

How is the icon placed inside the field?

The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds CalendarIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.

Is the icon read by screen readers?

No. CalendarIcon has aria-hidden, because the Date of Birth label already names the field. The icon is a visual hint only.

How is Date of Birth tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to date-birth, the input's id.

How do I limit the dates?

Set min and max as YYYY-MM-DD. For a date of birth, max set to today rules out future dates.

When should I use a Date Picker instead?

When you need ranges, disabled days, presets or the same calendar on every browser. The native date input is the lightest option for one date.

All 24 input examples