Please don't forget to read Usage part of each element.
Time picker allows the user to select a specfic time value.
Time picker allows users to enter a specific time value.
This is the default text field of the Design System. Anatomy details available in text field article.
The helper text is part of the text field. In this specific case, the helper text is mandatory to cleary indicate the requested format to the user.
The action icon is part of the text field. In this specific case, the action icon is mandatory to cleary indicate to the user the field type and also allows him to select the hour and minute value from the select popup.
Select popup allows the user to select the hour or minute value. It's triggered by clicking on the field or on the action icon.
There are two primary methods for selecting time:
- Type in a specific value in the text field.
- Select the hour or minute value from the select popup.
Optional vs. mandatory
All fields in a form are assumed required, if the time picker optional in yours, this field has to be tagged as so in the label.
Date picker allows the user to select a date or a range of dates.
- The input must have a helper with an exemple of value and the available timetable. See text fields with helper text accessibility.
- Hours list must have an
aria-label="Hours list"translated in each language.
- Minutes list must have an
aria-label="Minutes list"translated in each language.
aria-label="Open the popup to choose a time slot"attribute, translated in each language
role="button"attribute to inform users they are on a button.
tabindex="0"attribute to allow focus with keyboard.
Time picker is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.timepicker" attribute to work.
|inputPh||Placholder||"Choose your time"|
|inputLabel||Label||"Choose a time slot (optional)"|
|isFilled||The field is prefilled||false|
|helperTxt||Helper text below the field.
You can have multiple helpers by separating them with a "," (ex:"Hours available are between 8 and 18, This is an error message, This is a success message").
|"ex: 09:25 (Hours available are between 8 and 18)"|
For multiple helpers, just separate them with a ",". (default, rs-form-error,...)
|firstHour||From which hour?||8|
|lastHour||To which hour?||18|
|defaultSelectedHour||Selected hour (if isFilled=true)||1|
|defaultSelectedMinutes||Selected minutes (if isFilled=true)||1|
|bDisabled||Disabled the element||false|
Standard time picker
The select popup is stocked inside a
. Each list inside
must have a data attribute.
for the hours list and
for the minutes list.
Disabled time picker
Like every forms element, you must put
on the form tag to have negative version.
As Time picker is a webcomponent, you will have to load
Next time you add Time picker to the page, you have to call this JS:
CONTEXT refers to document or html element parent.
Use case example
NOT AVAILABLE LIVE PREVIEW
|iconAriaLabel||string||Open the popup to choose a time slot||No||Accessibility label for the icon|
|hoursAriaLabel||string||Hours list||No||Accessibility label for the list of hours|
|minutesAriaLabel||string||Minutes list||No||Accessibility label for the list of minutes|