DatePicker

stable

Date selection input using native date control with DS token styling and monospace font

Data EntryInteractive/Storybook ↗

import { DatePicker } from "@nodus/design-system"

Demo coming soon

Props

Prop	Type	Default	Description
`value`	`string`	—	Date value in YYYY-MM-DD format
`onChange`	`(value: string) => void`	—	Value change handler
`label`	`string`	—	Input label
`error`	`string`	—	Error message
`hint`	`string`	—	Help text

value

Type stringDefault —

Date value in YYYY-MM-DD format

onChange

Type (value: string) => voidDefault —

Value change handler

label

Type stringDefault —

Input label

error

Type stringDefault —

Error message

hint

Type stringDefault —

Help text

Design Rationale

This component was designed to express:

Date range selection with linked start/end inputs, automatic min/max constraints

Numeric input with currency formatting, min/max/step clamping, stepper buttons, and Intl.NumberFormat

Labeled text field with validation and helper text

Was this helpful?