Date Picker

DatePicker is a text field with a calendar. The header of the calendar switches between day, month and year views.

import { DatePicker, parseDate } from '@beyul/sulmu-ui'

Source · Figma

Examples

Basic

value and defaultValue are arrays of dates (one entry for a single date). Create dates with parseDate('2025-09-30'), which the library re-exports from Ark UI.

import { DatePicker, parseDate } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 320 }}>
      <DatePicker aria-label="Closing date" defaultValue={[parseDate('2025-09-30')]} />
    </div>
  )
}

Inside a Field

Inside a Field the label names the input, and an errorText marks the input invalid.

Closing date*

Start date

Choose a date

import { DatePicker, Field, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Field label="Closing date" required>
        <DatePicker />
      </Field>
      <Field label="Start date" errorText="Choose a date">
        <DatePicker size="lg" />
      </Field>
    </Stack>
  )
}

Props

Prop	Type	Default	Description
placeholder	string	MM/DD/YYYY	Shown in the empty field. Default: "MM/DD/YYYY".
size	"sm" | "md" | "lg"	md	sm 34px, md 40px, lg 44px. Default: md.
invalid	boolean	-	Marks the value as wrong. Inside a Field this is set for you.
aria-label	string	-	Defines a string value that labels the current element.
defaultValue	DateValue[]	-	The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.
value	DateValue[]	-	The controlled selected date(s).
name	string	-	The name attribute of the input element.
max	DateValue	-	The maximum date that can be selected.
disabled	boolean	-	Whether the calendar is disabled.
onValueChange	((details: ValueChangeDetails) => void)	-	Function called when the value changes.
min	DateValue	-	The minimum date that can be selected.

The remaining props of Ark UI’s DatePicker.Root are accepted too.

Accessibility and usage

• The date can be typed as well as picked, so the field works without the popup.
• The calendar button is labelled “Open calendar”; the header buttons are “Previous” and “Next”.
• Use min and max (dates from parseDate) to limit the range.
• Give it an aria-label when it is not inside a Field.