Time Picker

Labelling

Label Text

The label attribute provides a short description of the purpose of the Time Picker.

If a visible label can't be used, provide one using the aria-label attribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time"></vwc-time-picker>

Helper Text

The helper-text attribute provides additional information to help the user enter the correct information.

To add HTML to the helper text, use the helper-text slot.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker
	label="Start time"
	helper-text="Select a time for the event to start"
></vwc-time-picker>

Value

The value attribute contains the currently selected time.

Empty string or undefined represent no time being selected.

It will always contain a valid time in the format HH:MM:SS when a time is selected. If the user types an invalid time, value will be empty.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time" value="12:30:00"></vwc-time-picker>

Validation Feedback

Error Text

The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker
	error-text="Please select a time for the event to start"
	label="Start time"
></vwc-time-picker>

Clock

The Time Picker will display the time in 12h or 24h format depending on the configured locale.

Use the clock attribute to override this behavior.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time" clock="24h"></vwc-time-picker>

Minutes Step

Use the minutes-step attribute to configure the step between minutes in the Time Picker.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker minutes-step="15" label="Start time"></vwc-time-picker>

Seconds Step

Use the seconds-step attribute to configure the step between seconds in the Time Picker.

If not set, the Time Picker will not display seconds.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker seconds-step="5" label="Start time"></vwc-time-picker>

Min

Set the min attribute to configure the earliest time to accept. The user will be prevented from choosing an earlier time, however it is still possible to manually enter one.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time" min="10:00:00"></vwc-time-picker>

Max

Set the max attribute to configure the latest time to accept. The user will be prevented from choosing a later time, however it is still possible to manually enter one.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time" max="10:00:00"></vwc-time-picker>

Disabled

The disabled attribute disables the Time Picker input element.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time" disabled></vwc-time-picker>

Read Only

The readonly attribute prevents the user from changing the Time Picker input element value.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time" readonly></vwc-time-picker>