Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Date Input for React

A Date of Birth field with a calendar icon inside it. The browser opens its own date control, and no date is selected yet.

A Date of Birth label and a calendar icon inside a date field. The browser supplies the picker. No date is selected.

Use it for one date, such as a birthday, when the native control is enough. Ranges and disabled days belong on a Date Picker. In React, Base UI does not draw that calendar.

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

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="date-birth">Date of Birth</FieldLabel>
  <InputGroup className="bg-background">
    <InputGroupInput id="date-birth" type="date" />
    <InputGroupAddon>
      <CalendarIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
</Field>

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.

API Reference

Field

Sets htmlFor="date-birth". The rest is on the Field page.

Input Group

Sets id="date-birth" and type="date". The rest is on the Input Group page.

All 24 input examples