Time Picker

The TimePicker component provides a styled time input with labels, helper text, and native picker access.

Usage & Examples

Reminder Time

Uses 24-hour time.

reminder-time.tsx
<TimePicker
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

Visual variants

Themes

primary

Uses 24-hour time.

secondary

Uses 24-hour time.

tertiary

Uses 24-hour time.

quaternary

Uses 24-hour time.

States

success

Uses 24-hour time.

warning

Uses 24-hour time.

error

Uses 24-hour time.

info

Uses 24-hour time.

Sizes

xs

Uses 24-hour time.

small

Uses 24-hour time.

medium

Uses 24-hour time.

large

Uses 24-hour time.

Variants

solid

Uses 24-hour time.

outline

Uses 24-hour time.

glass

Uses 24-hour time.

Rounding

none

Uses 24-hour time.

medium

Uses 24-hour time.

large

Uses 24-hour time.

Shadows

none

Uses 24-hour time.

light

Uses 24-hour time.

strong

Uses 24-hour time.

visual-variants.tsx
// Themes
<TimePicker theme="primary"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker theme="secondary"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker theme="tertiary"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker theme="quaternary"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

// States
<TimePicker state="success"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker state="warning"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker state="error"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker state="info"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

// Sizes
<TimePicker size="xs"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker size="small"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker size="medium"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker size="large"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

// Variants
<TimePicker variant="solid"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker variant="outline"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker variant="glass"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

// Rounding
<TimePicker rounding="none"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker rounding="medium"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker rounding="large"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

// Shadows
<TimePicker shadow="none"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker shadow="light"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
<TimePicker shadow="strong"
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

Interaction states

Disabled

Uses 24-hour time.

Loading

Uses 24-hour time.

Full width

Uses 24-hour time.

interaction-states.tsx
// Disabled
<TimePicker disabled
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
// Loading
<TimePicker loading
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />
// Full width
<TimePicker fullWidth
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

Props API

40 props
Columns
Time Picker props API
Default
Description
autoCompleteReact.HTMLInputAutoCompleteAttributeNoprops"off"Optional autocomplete value.
buttonClassNamestringNoprops—Additional class name for the picker trigger button.
classNamestringNostyling—Additional class name for the component root.
containerClassNamestringNoprops—Additional class name for the outer label/component container.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultValuestringNoprops—Initial time value in HH:mm or HH:mm:ss format for uncontrolled usage.
disabledbooleanNopropsfalseWhether the component is disabled.
errorClassNamestringNoprops—Additional class name for error text.
errorMessageReactNodeNoprops—Error text connected with aria-errormessage and announced as an alert.
fullWidthbooleanNopropsfalseWhether the picker should stretch to the full available width.
helperTextReactNodeNoprops—Helper text connected with aria-describedby.
helperTextClassNamestringNoprops—Additional class name for description text. Additional class name for helper text.