Time Picker
2.1.16
The Time Picker is a text field enhanced by a panel that lets the user select a single time.
| Namn | Typ | Beskrivning |
|---|---|---|
customTranslations | TimePickerTranslation | Optional. Used to provide custom translation strings to the component. |
disabled | boolean | Optional. If true, the component will not be interactive. |
errorMessage | string | Optional. Text to be shown when an error has occurred. |
fullWidth | boolean | Optional. If true, the component will take up the full width of its container. |
helperText | string | Optional. Additional descriptive text shown below the time picker. |
isLoading | boolean | Optional. If true, a loading skeleton will be rendered instead of the component. |
label | string | Optional descriptive label text. |
lang | "sv" |
"en" | Optional. Set the language used for the component’s translation strings. Default is "sv". |
readOnly | boolean | Optional. If true, the component will be read-only. |
required | boolean | If true, aria-required="true" will be added to the input element, informing assistive technologies that the field is mandatory.
⚠️ Note: This does not enable native HTML validation or add a visual asterisk.
If a visual indication is needed, you must manually add a * to the label yourself. |
sheetSupportingText | string | Optional. Supporting text showing under the title of the sheet in mobile views. |
sheetTitle | string | Optional. Title showing at the top of the sheet in mobile views. |
timeSteps | TimeStepOptions | The time steps between two time unit options.
For example, if timeStep.minutes = 8, then the available minute options will be [0, 8, 16, 24, 32, 40, 48, 56].
When single column time renderer is used, only timeStep.minutes will be used.
@default{ hours: 1, minutes: 1, seconds: 5 } |
npm install @sj-ab/component-library.ui.time-pickerAdaptive design
Semantik
Time Picker presenteras som ett inmatningsfält <input type="text"> med en knapp som öppnar en väljare i en popup.
På desktop kan användaren kan välja om de vill skriva in en tid i inmatningsfältet eller genom väljaren. På mobil visas enbart väljaren.
WAI-ARIA
Väljaren använder bland annat rollerna:
role="dialog"för väljarens dialogrutarole="listbox"för listorna med minuter respektive timmarrole="option"för varje alternativaria-labelför att sätta unika namn på listorna och på dialogrutan
Kända brister med tangentbord
Väljaren som visas i popup har i nuläget vissa brister kring tangentbordsstyrning. Användaren kan inte växla mellan timmar och minuter med pil höger och vänster.
Importer av Time Picker
Repos med Time Picker
Senaste installerade version av Time Picker
Äldsta installerade version av Time Picker