DatePicker

A date picker input with a calendar dropdown for selecting a single date. Supports labels, error states, and colors.

Basic

Prop	Type	Default	Description
`value`	`Date \| null`	—	The selected date (controlled).
`defaultValue`	`Date`	—	The initial selected date (uncontrolled).
`onValueChange`	`(date: Date \| null) => void`	—	Called when the selected date changes.
`placeholder`	`string`	—	Placeholder text when no date is selected.
`label`	`string`	—	Label displayed above the date picker.
`error`	`string`	—	Error message displayed below the input.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus ring and calendar selection.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

Date | null

The selected date (controlled).

defaultValue

Date

The initial selected date (uncontrolled).

onValueChange

(date: Date | null) => void

Called when the selected date changes.

placeholder

string

Placeholder text when no date is selected.

label

string

Label displayed above the date picker.

error

string

Error message displayed below the input.

color"blue"

Accent color for focus ring and calendar selection.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}