Components

DatePicker

DatePicker is a native `<input>`-backed control for selecting dates and times. It keeps standard form semantics, browser validation, and keyboard behavior.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

const ControlledDateDemo = () => {
  const [date, setDate] = useState('2026-04-10')
  return (
    <VStack spacing={16}>
      <Text>Selected: {date}</Text>
      <DatePicker
        aria-label="Controlled date"
        selection={date}
        onSelectionChange={setDate}
        mode="date"
      />
    </VStack>
  )
}

Uncontrolled Usage

Preview unavailable for this example in the static docs build.

Show code

const UncontrolledTimeDemo = () => {
  return (
    <VStack spacing={16}>
      <DatePicker
        aria-label="Meeting time"
        defaultValue="09:30"
        mode="time"
      />
      <Text>Use the browser-native time picker input.</Text>
    </VStack>
  )
}

Date and Time

Preview unavailable for this example in the static docs build.

Show code

const DateAndTimeDemo = () => {
  const [value, setValue] = useState('2026-04-10T09:30')
  return (
    <VStack spacing={16}>
      <Text>Selected: {value}</Text>
      <DatePicker
        aria-label="Scheduled start"
        selection={value}
        onSelectionChange={setValue}
        mode="dateAndTime"
      />
    </VStack>
  )
}

SwiftUI-Style Components

Preview unavailable for this example in the static docs build.

Show code

const DisplayedComponentsDemo = () => {
  const [value, setValue] = useState('2026-04-10T09:30')
  return (
    <VStack spacing={16}>
      <Text>Selected: {value}</Text>
      <DatePicker
        aria-label="SwiftUI-style schedule"
        selection={value}
        onSelectionChange={setValue}
        displayedComponents={['date', 'hourAndMinute']}
      />
    </VStack>
  )
}

Minute Interval

Preview unavailable for this example in the static docs build.

Show code

<DatePicker
      aria-label="Quarter-hour time"
      defaultValue="09:30"
      minuteInterval={15}
      mode="time"
    />

API

Prop	Type	Required	Description
`selection`	`string`	No	SwiftUI-style alias for the current native input value.
`value`	`string`	No	The current native input value.
`defaultSelection`	`string`	No	SwiftUI-style alias for the initial uncontrolled value.
`defaultValue`	`string`	No	The initial native input value when uncontrolled.
`onChange`	`ChangeEventHandler<HTMLInputElement>`	No	Native input change handler.
`onSelectionChange`	`(value: string) => void`	No	SwiftUI-style value-first change handler.
`onValueChange`	`(value: string) => void`	No	Value-first change handler for SwiftUI-style ergonomics.
`min`	`string`	No	The minimum selectable value, expressed in the same native input format as `value`.
`max`	`string`	No	The maximum selectable value, expressed in the same native input format as `value`.
`minimumDate`	`string`	No	Backward-compatible minimum alias for SwiftUI-style callers.
`maximumDate`	`string`	No	Backward-compatible maximum alias for SwiftUI-style callers.
`mode`	`DatePickerMode`	No	The display mode of the date picker. Default: `'date'`
`displayedComponents`	`DatePickerDisplayedComponent[]`	No	SwiftUI-style displayed components. When provided, these values determine the native input type.
`minuteInterval`	`number`	No	SwiftUI-style minute granularity for time-based pickers.
`disabled`	`boolean`	No	Whether the date picker is disabled. Default: `false`

Overview

DatePicker is a native <input>-backed control for selecting dates and times. It keeps standard form semantics, browser validation, and keyboard behavior.

SwiftUI Correspondence: Similar to SwiftUI's DatePicker.

Notes

selection and defaultSelection are the preferred SwiftUI-style value APIs
value and defaultValue remain available as React-friendly aliases
onChange forwards the native input event
onSelectionChange and onValueChange receive the latest string value
Supported modes are date, time, and dateAndTime
displayedComponents={['date', 'hourAndMinute']} maps to dateAndTime
Use min and max for native bounds in the same string format as value
minuteInterval maps to the native step attribute for time and dateAndTime modes
disabled behaves like a native input prop

Best Practices

Mode selection: Choose date, time, or dateAndTime based on the required granularity
String values: Keep the value in the browser's native input format for the selected mode
Bounds: Use min and max to constrain user input
Labels: Provide an accessible label or visible label
Localization: Let the browser handle localized rendering of the native control

ControlGroup

ControlGroup clusters related actions under a shared label. The component keeps SwiftUI's grouped-control mental model while using standard web grouping semantics.

DefaultScrollAnchor

DefaultScrollAnchor adapts SwiftUI's `defaultScrollAnchor` modifier into an explicit wrapper.

DatePicker

Examples

API

Overview

Notes

Best Practices

On this page