TimePicker
Imports
import {TimePicker} from 'material-expressive-react';
import {TimePicker} from 'material-expressive-react/datetime';
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| cancelText | string | Cancel | No | |
| clearText | string | Clear | No | |
| confirmText | string | OK | No | |
| constraints | TimePickerConstraints | No | ||
| defaultInputMode | enum | No | ||
| defaultOpen | boolean | false | No | |
| defaultValue | number | TimeRange | null | No | ||
| format | enum | 12h | No | |
| inputMode | enum | No | ||
| locale | string | No | ||
| maxTime | TimeValue | No | ||
| minTime | TimeValue | No | Allowed min/max time (minute-of-day). Accepts minutes, {hour,minute}, or 'HH:MM'. | |
| minuteStep | enum | 5 | No | Minute increments for clock dial selection. |
| onCancel | (() => void) | No | ||
| onConfirm | ((value: number | TimeRange | null) => void) | No | ||
| onDismiss | (() => void) | No | ||
| onOpenChange | ((open: boolean) => void) | No | ||
| onValueChange | ((value: number | TimeRange | null) => void) | No | ||
| onValueReselect | ((value: number | TimeRange | null) => void) | No | ||
| open | boolean | No | ||
| selectionMode | enum | single | No | |
| showClear | boolean | true | No | |
| supportingText | string | No | ||
| title | string | No | ||
| value | number | TimeRange | null | No | ||
| variant | enum | modal | No |
Events
This component does not explicitly re-emit DOM events via wrapper props.
Slots
Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).
If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).
Examples
See Storybook for live examples and variants.