## Examples

Appending the TimePicker to the `document.body` may cause accessibility issues, including being unable to navigate into the menu via keyboard or other assistive technologies. Instead, appending to the `"parent"` is recommended.

### Basic 12 hour


import TimePickerBasic12Hour from "./TimePickerBasic12Hour.tsx?raw"

<LiveExample src={TimePickerBasic12Hour} />

### Basic 24 hour


import TimePickerBasic24Hour from "./TimePickerBasic24Hour.tsx?raw"

<LiveExample src={TimePickerBasic24Hour} />

### Custom delimiter


import TimePickerCustomDelimiter from "./TimePickerCustomDelimiter.tsx?raw"

<LiveExample src={TimePickerCustomDelimiter} />

### Minimum/maximum times

The `minTime`/`maxTime` props restrict the options shown for the user to select from as well as trigger the `invalidMinMaxErrorMessage` if the user enters a time outside this range.


import TimePickerMinMaxTimes from "./TimePickerMinMaxTimes.tsx?raw"

<LiveExample src={TimePickerMinMaxTimes} />

### With seconds


import TimePickerWithSeconds from "./TimePickerWithSeconds.tsx?raw"

<LiveExample src={TimePickerWithSeconds} />

### Basic 24 hours with seconds


import TimePickerBasic24HoursWithSeconds from "./TimePickerBasic24HoursWithSeconds.tsx?raw"

<LiveExample src={TimePickerBasic24HoursWithSeconds} />