DatePicker

Inputs

Stablev1.0.0

Accessible date picker with a popover calendar for selecting a single date.

Preview

Select a date

With default value

Installation

npx @component-labs/cli add date-picker

This will:
- Install required dependencies (@ariakit/react, class-variance-authority, lucide-react)
- Copy the DatePicker component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { DatePicker } from "@component-labs/ui";

<DatePicker placeholder="Pick a date" />

Props

Name	Type	Default	Description
`value`	`Date`	`-`	Controlled selected date
`defaultValue`	`Date`	`-`	Default selected date (uncontrolled)
`onChange`	`(date: Date) => void`	`-`	Called when a date is selected
`placeholder`	`string`	`"Pick a date…"`	Placeholder text when no date is selected
`disabled`	`boolean`	`-`	Whether the picker is disabled
`label`	`ReactNode`	`-`	Label displayed above the trigger
`error`	`string`	`-`	Error message — switches trigger to error variant
`className`	`string`	`-`	Additional CSS classes for the wrapper

Examples

Basic

Simple date picker

<DatePicker placeholder="Pick a date" />

With Label

Date picker with a label

<DatePicker label="Date of birth" placeholder="Select date" />

With Default Value

Pre-selected date

<DatePicker defaultValue={new Date(2025, 0, 15)} />

Controlled

Controlled date picker

const [date, setDate] = useState<Date>();

<DatePicker
  value={date}
  onChange={setDate}
  label="Appointment date"
/>
{date && <p>Selected: {date.toDateString()}</p>}

With Error

Date picker with validation error

<DatePicker
  label="Required field"
  error="Please select a date"
/>

Disabled

Disabled date picker

<DatePicker
  disabled
  defaultValue={new Date()}
  label="Disabled"
/>

Performance

Bundle Size

~5KB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority
•clsx
•tailwind-merge
•lucide-react

Accessibility

•Built on Ariakit Popover for accessible disclosure pattern
•Keyboard navigation: Enter/Space opens calendar, Escape closes
•ARIA attributes automatically applied to trigger and popover
•Today highlighted visually for orientation
•Disabled state prevents interaction and updates ARIA