Components / Date & time
DurationInput
Durations as text (1h 30m, 1:30, PT1H30M) or a stepper popover with presets.
@ruckc/truss-ui Date & time
Import
import { DurationInput } from '@ruckc/truss-ui';Playground
units
min
max
value
API
| Prop | Type | Default | Description |
|---|---|---|---|
value bindable | number | null | null | Seconds. |
label | string | — | Visible label shown above the control. |
ariaLabel | string | — | Accessible name when no visible `label` is shown. |
units | DurationUnit[] | ['d', 'h', 'm'] | Enabled units, any of d/h/m/s. A bare number is read in the smallest one. |
min | number | 0 | Minimum allowed value. |
max | number | — | Maximum number to show before collapsing the rest. |
presets | number[] | [900, 1800, 3600, 4 * 3600, 86400] | Offer quick-pick ranges. |
placeholder | string | — | Hint shown while the field is empty. |
disabled | boolean | false | Disables the control: it cannot be focused, changed or activated. |
error | string | — | Error message. Marks the control invalid, replaces the hint, and is announced to assistive technology. |