TimePicker

<ts-time-picker> vv0.6.3

The ts-time-picker component.

Open in Storybook for interactive demos.

Preview

<ts-time-picker format="24" size="md" step="1"></ts-time-picker>

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Renders the time picker as disabled.
`error`	`error`	`string \| undefined`	—	Error message — renders the input in an error state.
`format`	`format`	`"12" \| "24"`	`'24'`	Time display format: 12-hour or 24-hour clock.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the input.
`label`	`label`	`string \| undefined`	—	Label text displayed above the input.
`name`	`name`	`string \| undefined`	—	Name attribute for form submission.
`required`	`required`	`boolean`	`false`	Makes the time picker required.
`showSeconds`	`show-seconds`	`boolean`	`false`	Whether to show the seconds segment.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The time picker’s size.
`step`	`step`	`number`	`1`	Minutes increment step.
`value`	`value`	`string \| undefined`	—	The time value in “HH:mm” or “HH:mm:ss” format.

Event	Detail	Bubbles	Composed	Description
`tsBlur`	`void`	Yes	Yes	Emitted when the time picker loses focus.
`tsChange`	`\{ value: string; \}`	Yes	Yes	Emitted when the time value changes.
`tsFocus`	`void`	Yes	Yes	Emitted when the time picker gains focus.

Use ::part() to style internal elements:

Part	Description
`base`	The outer wrapper.
`error-text`	The error message wrapper.
`help-text`	The help text wrapper.
`label`	The label element.
`period`	The AM/PM toggle button.
`segment`	A time segment input.
`separator`	The colon separator between segments.

ts-time-picker::part(base) {
  /* your custom styles */
}

<ts-time-picker format="24" size="md" step="1"></ts-time-picker>

import { TsTimePicker } from '@tessera-ui/react';

<TsTimePicker format="24" size="md"></TsTimePicker>