Duration Field

Accessibility

Import DurationField, DurationFieldLimitEdge, DurationFieldPart, DurationFieldSize, DurationUnit, durationToMilliseconds, durationToSeconds from @prepared911/ui/duration-field.

Group. The root is role="group" named by the label (aria-labelledby) and described by the description and the error (aria-describedby). The label is a real label for the amount, so clicking it focuses the amount.
Amount. A spinbutton named by amountLabel, with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext from NumberField. required, aria-invalid and aria-errormessage sit on it, and the error id is also in its aria-describedby so the message is announced. With one unit, the unit's name is in its description.
Unit and presets. Each is a radiogroup of radio segments with its own name (unitLabel, presetsLabel), one tab stop each, and arrow keys that move and select (Home and End jump). Selection is announced through aria-checked.
Keyboard. Tab visits the decrement button, the amount, the increment button, the unit choice and the preset choice. On the amount: Arrow keys step, Page keys take a large step, Home and End jump to the bounds, Enter commits a draft and Escape reverts it.
Announcements. A stepper press and a limit are announced in a polite live region through valueAnnouncement, which receives the unit so the message can read "4 hours".
Read-only. The amount is readonly; the unit and preset radiogroups carry aria-readonly="true". Nothing is removed from the tab order.
Disabled. Every part is disabled and the hidden inputs post nothing.
Forced colors, reduced motion, RTL. Each part keeps its own forced-colors paint and reduced-motion behavior. The layout uses logical properties and mirrors with the document direction.
Targets. Segments and steppers meet the system's target sizes; at Small the 18px steppers keep 24px of clear space.

Error announcement. An error that appears or changes after the control mounts is announced politely once, unless it comes from a submit attempt that the enclosing Form speaks for with its focus move or summary. A cleared error announces nothing. A Form opts out with announceFieldErrors={false}.

Duration Field / API and Development

Empty State / Usage

Duration Field

Accessibility

Import DurationField, DurationFieldLimitEdge, DurationFieldPart, DurationFieldSize, DurationUnit, durationToMilliseconds, durationToSeconds from @prepared911/ui/duration-field.

Group. The root is role="group" named by the label (aria-labelledby) and described by the description and the error (aria-describedby). The label is a real label for the amount, so clicking it focuses the amount.
Amount. A spinbutton named by amountLabel, with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext from NumberField. required, aria-invalid and aria-errormessage sit on it, and the error id is also in its aria-describedby so the message is announced. With one unit, the unit's name is in its description.
Unit and presets. Each is a radiogroup of radio segments with its own name (unitLabel, presetsLabel), one tab stop each, and arrow keys that move and select (Home and End jump). Selection is announced through aria-checked.
Keyboard. Tab visits the decrement button, the amount, the increment button, the unit choice and the preset choice. On the amount: Arrow keys step, Page keys take a large step, Home and End jump to the bounds, Enter commits a draft and Escape reverts it.
Announcements. A stepper press and a limit are announced in a polite live region through valueAnnouncement, which receives the unit so the message can read "4 hours".
Read-only. The amount is readonly; the unit and preset radiogroups carry aria-readonly="true". Nothing is removed from the tab order.
Disabled. Every part is disabled and the hidden inputs post nothing.
Forced colors, reduced motion, RTL. Each part keeps its own forced-colors paint and reduced-motion behavior. The layout uses logical properties and mirrors with the document direction.
Targets. Segments and steppers meet the system's target sizes; at Small the 18px steppers keep 24px of clear space.

Duration Field / API and Development

Empty State / Usage