Datepickers

The Date Picker component lets users select a date.

DatePlease select a date

Variations

Basic Datepicker Input

Copy as:HTMLReact

Base Size:

Date

copydone

DatePlease select a date

copydone

DateSelect a date between 2020 and 2023

copydone

Large Size:

Date

copydone

DatePlease select a date

copydone

DateSelect a date between 2020 and 2023

copydone

<!-- Component: Basic base sized datepicker -->
<div class="relative my-6">
  <input id="id-date01" type="date" name="id-date01" class="relative w-full h-10 px-4 text-sm placeholder-transparent transition-all border-b outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
  <label for="id-date01" class="absolute -top-2 left-2 z-[1] cursor-text px-2 text-xs text-slate-400 transition-all before:absolute before:left-0 before:top-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-autofill:-top-2 peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:cursor-default peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent"> Date </label>
</div>
<!-- End Basic base sized datepicker -->

Outline Datepicker Input

Copy as:HTMLReact

Base Size:

Date

copydone

DatePlease select a date

copydone

DateSelect a date between 2020 and 2023

copydone

Large Size:

Date

copydone

DatePlease select a date

copydone

DateSelect a date between 2020 and 2023

copydone

<!-- Component: Rounded basic base sized datepicker -->
<div class="relative my-6">
  <input id="id-date07" type="date" name="id-date07" class="relative w-full h-10 px-4 text-sm placeholder-transparent transition-all border rounded outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
  <label for="id-date07" class="absolute -top-2 left-2 z-[1] cursor-text px-2 text-xs text-slate-400 transition-all before:absolute before:left-0 before:top-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-autofill:-top-2 peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:cursor-default peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent"> Date </label>
</div>
<!-- End Rounded basic base sized datepicker -->

Usage

Date pickers let people select a date. They should be suitable for the context in which they appear. Date pickers can be embedded into:

Dialogs
Forms

Specs

Datepickers fields come in two basic styles (base and outlined) and 2 sizes:

Base: text font size of 0.875rem (14px) and a label that scales from 0.875rem (14px) in font size, when the input is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.
Large: text font size of 1rem (16px) and a label that scales from 1rem (16px) in font size, when the input is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.

Accessibility notes

Date Pickers are built with the native <input type="date"> element and no additional accessibility roles are required. For better accessibility when using the element:

An id attribute to allow the date <input> to be associated with a <label> element for accessibility purposes.
A name attribute to set the name of the associated data point submitted to the server when the form is submitted.

Datepickers

Variations

Basic Datepicker Input

Base Size:

Large Size:

Outline Datepicker Input

Base Size:

Large Size:

Usage

Specs

Accessibility notes

Check out the latest release!