Date picker

DatePicker is a Radix-Popover-backed date selector. The trigger is a TextInput-shaped field; the popover renders a calendar grid for selection. Returns a real Date object, not a string.

Use it for

• Single-date selection on forms (start date, due date, scheduled-for)
• Filtering by date in dashboards (with minDate / maxDate constraints)
• Any field where the user picks one specific calendar day

For a time-of-day picker, use TimePicker. Date and time pickers should be paired side by side rather than combined into one component.

Import

import { DatePicker } from '@brikdesigns/bds';

Variants

Default

import { useState } from 'react';

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

<DatePicker
  label="Start date"
  value={date}
  onChange={setDate}
  placeholder="Pick a date"
/>

With constraints

minDate / maxDate clamp the selectable range. Out-of-range days render disabled in the popover.

<DatePicker
  label="Available date"
  value={date}
  onChange={setDate}
  minDate={new Date()}
  maxDate={addMonths(new Date(), 6)}
/>

Sizes

sm, md (default), lg — match TextInput sizes.

Error state

<DatePicker
  label="Due date"
  error="Pick a date in the future"
  value={date}
  onChange={setDate}
/>

When not to use

• Don't use DatePicker for time-only selection. Use TimePicker.
• Don't use DatePicker for known months/days only (e.g. picking a birthday year). A pair of Selects is faster for fields where the calendar UI is overkill.

Accessibility

• The trigger is a real <input> — keyboard access, focus ring, screen-reader labels match TextInput.
• The calendar popover uses Radix Popover under the hood — focus trap, Esc to dismiss, click-outside to close.
• Selected date announces via aria-live on the trigger.
• label auto-wires htmlFor/id.

API

Related

• TimePicker — pair with DatePicker for date-and-time entry
• TextInput — base trigger shape
• Storybook playground