Date Picker

Styled native date input for scheduling, due dates, and release planning with built-in label, helper text, and validation messaging support.

AccessibleDark Mode

Install

$npx react-principles add date-picker

Live Demo

Open in Storybookopen_in_new

Launch date

Select the deployment day.

Selected date: 2026-04-10

Code Snippet

src/ui/DatePicker.tsx

import { DatePicker } from "@/ui/DatePicker";

<DatePicker
  label="Launch date"
  description="Select the deployment day."
/>

Copy-Paste (Single File)

DatePicker.tsx

import { forwardRef, type InputHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
  label?: string;
  description?: string;
  error?: string;
}

Props

Prop	Type	Default	Description
`label`	`string`	`—`	Optional label displayed above the date input.
`description`	`string`	`—`	Helper text shown below the field when there is no error.
`error`	`string`	`—`	Error message that replaces the helper text and applies error styling.
`className`	`string`	`—`	Additional classes merged into the root wrapper.
`id`	`string`	`Generated from label`	Overrides the input id used by the label element.

react-principles