StellarUI · stellar-time-field

Complete props, events, slots, and implementation notes for the shipped time field.

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`default \| ghost`	`default`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`clamp`	`boolean`	`false`
`value`	`string`	`''`
`name`	`string`	`''`
`min`	`string`	`''`
`max`	`string`	`''`
`step`	`string`	`''`
`disabled`	`boolean`	`false`
`readonly`	`boolean`	`false`

Event	Kind	Notes
`input`	host event	Fires whenever the time value changes during editing so `data-bind:value` stays live.
`change`	host event	Fires when the native time input commits a value change.

Slot	Notes

The public tag is `stellar-time-field`, shipped as a dedicated time-field control instead of another `stellar-text-field type="time"` variation.
It keeps a real native `<input type="time">` inside for keyboard, picker, and form behavior.
`value`, `min`, and `max` use the native `HH:MM` shape, while `step` is forwarded in seconds.
`clamp` snaps out-of-range values back inside `min`/`max` on blur.
`required`, `readonly`, `disabled`, `name`, `min`, `max`, and `step` forward to the inner native time input.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native time input for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
Use `data-bind:value` when binding it from Datastar or when wiring other docs controls to calendar props.

<stellar-time-field>