Timepicker
The Timepicker allows users to pick a time either by typing in the input field or by selecting a time in a dropdown menu.
It displays time to the user in 12-hour format (AM/PM) and exposes the selected value in 24-hour format. The value can be retrieved via the component's value
attribute.
The invalid
attribute indicates whether the user input has passed the component's validation.
The component displays an error message if the user input fails the validations (wrong format, or missing input, if the input is marked as required). The component can also display a customized error message.
* Required property
string
label-position
is set to none (for accessibility reasons).
boolean
string
read-only
top | left | none
top
. Set to none
if no label should be displayed.
string
boolean
top
. Set this property to none
if no label should be displayed.
string
string
hh:mm
).
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
Keyboard Support
Input Field
Key | Function |
---|---|
Tab | Focuses the button. |
Up Arrow Down Arrow | Opens dropown bringing focus on the value closest to the one displayed in the input. If the input field is blank, the dropdown opens with 09:00 in focus. |
Button
Key | Function |
---|---|
Shift + Tab | Focuses the input field. |
Space Enter Up Arrow Down Arrow | Opens dropown bringing focus on the value closest to the one displayed in the input. If the input field is blank, the dropdown opens with 09:00 in focus. |
Dropdown
Key | Function |
---|---|
Space Enter | Selects the option and closes the dropdown. Focus is returned to the button. |
Tab | Closes the dropdown and focuses the next focusable element. |
Escape |
|
Up Arrow | Focuses the previous time in the list. |
Down Arrow | Focuses the next time in the list. |
Home | Focuses the first time in the list (12:00 AM). |
End | Focuses the last time in the list (11:45 PM). |
The prevent validation
prop is used with a specific use-case in mind.
When components that feature required fields are initally focused within a modal, closing the modal will flash the required error.
The prevent validation
prop is useful in this case, where the close button's id can be passed through preventing the validation flash.