Choose a version:

TimeField

Use s-time-field to capture time input from users. Provides a consistent interface for time selection with proper validation.

Anchor to propertiesProperties

Anchor to details details string: Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.
Anchor to disabled disabled boolean Default: false: Disables the field, disallowing any interaction.
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to id id string: A unique identifier for the element.
Anchor to label label string: Content to use as the field label.
Anchor to value value string: Current selected value.

The default, '', means no time is selected.

The value must be a 24-hour time in HH:mm:ss format, with leading zeros.

Examples: "00:00:00", "09:05:00", "23:59:00", "14:03:30".

This follows the HTML time input value format, which is always 24-hour with leading zeros regardless of UI presentation.

See: https://developer.mozilla.org/docs/Web/HTML/Element/input/time

Was this section helpful?

Anchor to eventsEvents

Anchor to blur blur (event: <"s-divider">) => void
Anchor to change change (event: <"s-divider">) => void
Anchor to focus focus (event: <"s-divider">) => void
Anchor to input input (event: <"s-divider">) => void

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-time-field

label="Time"

value="11:42"

details="Select a time">

</s-time-field>

<s-time-field

label="Time"

value="11:42"

details="Select a time"

error="Time out of range">

</s-time-field>

Examples

Code

Default

<s-time-field
  label="Time"
  value="11:42"
  details="Select a time">
</s-time-field>

<s-time-field
  label="Time"
  value="11:42"
  details="Select a time"
  error="Time out of range">
</s-time-field>

TimeField

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEvent

Examples

Code

Default

Preview