mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
112 lines
5.1 KiB
YAML
112 lines
5.1 KiB
YAML
name: Timepicker
|
|
description: Input controls that allow users to select time values through a dropdown interface with hours, minutes, and optional
|
|
AM/PM selection.
|
|
category: Input
|
|
slds_classes:
|
|
root: ''
|
|
elements: []
|
|
modifiers: []
|
|
states:
|
|
- class: slds-is-selected
|
|
description: Selected time state
|
|
trigger: Currently selected time option
|
|
variants:
|
|
- name: Base
|
|
description: Standard time selection dropdown
|
|
classes: []
|
|
usage_context: Default timepicker for time value selection
|
|
differences: Dropdown list with predefined time options
|
|
lightning_component:
|
|
name: lightning-input (type='time')
|
|
url: https://developer.salesforce.com/docs/component-library/bundle/lightning-input
|
|
mapping_notes: Mapped through lightning-input with type='time' which provides native time picker
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab to focus timepicker input
|
|
- Arrow keys to navigate time options
|
|
- Enter/Space to select time
|
|
- Type to filter time options
|
|
screen_reader:
|
|
- Current time value announced
|
|
- Time options list communicated
|
|
- Selection changes announced
|
|
- Time format clearly communicated
|
|
aria_attributes:
|
|
- role='listbox' for time options container
|
|
- role='option' for individual time slots
|
|
- aria-selected for chosen time
|
|
- aria-label for time selection purpose
|
|
- aria-expanded for dropdown state
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- For time selection in forms
|
|
- When specific time precision is needed
|
|
- For scheduling or appointment interfaces
|
|
- When time constraints or ranges apply
|
|
when_not_to_use:
|
|
- For approximate times (use text input)
|
|
- When time precision is not important
|
|
- For duration selection (use different controls)
|
|
best_practices:
|
|
- Use appropriate time increments (15min, 30min, etc.)
|
|
- Provide clear time format indication
|
|
- Support both keyboard and mouse interaction
|
|
- Handle time zone considerations appropriately
|
|
- Show current selection clearly
|
|
common_mistakes:
|
|
- Using inappropriate time increments
|
|
- Poor time format handling
|
|
- Not considering time zone implications
|
|
- Unclear selection feedback
|
|
code_examples:
|
|
- title: Basic Timepicker
|
|
code: "<div class=\"slds-form-element\">\n <label class=\"slds-form-element__label\" for=\"timepicker-id\">\n \
|
|
\ Time\n </label>\n <div class=\"slds-form-element__control\">\n <div class=\"slds-combobox_container\"\
|
|
>\n <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"\
|
|
false\" aria-haspopup=\"listbox\">\n <div class=\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\"\
|
|
>\n <input type=\"text\" class=\"slds-input slds-combobox__input\" value=\"9:00 AM\" readonly />\n \
|
|
\ <span class=\"slds-icon_container slds-icon-utility-clock slds-input__icon slds-input__icon_right\">\n \
|
|
\ <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#clock\"\
|
|
></use>\n </svg>\n </span>\n </div>\n <div class=\"slds-dropdown slds-dropdown_length-5\
|
|
\ slds-dropdown_fluid\" role=\"listbox\">\n <ul class=\"slds-listbox slds-listbox_vertical\">\n \
|
|
\ <li role=\"presentation\" class=\"\">\n <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\"\
|
|
\ role=\"option\" aria-selected=\"true\">\n <span class=\"slds-media__body\">9:00 AM</span>\n \
|
|
\ </div>\n </li>\n <li role=\"presentation\" class=\"\">\n \
|
|
\ <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\" role=\"option\">\n <span\
|
|
\ class=\"slds-media__body\">9:15 AM</span>\n </div>\n </li>\n <li role=\"\
|
|
presentation\" class=\"\">\n <div class=\"slds-media slds-listbox__option slds-listbox__option_plain\"\
|
|
\ role=\"option\">\n <span class=\"slds-media__body\">9:30 AM</span>\n </div>\n \
|
|
\ </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n"
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- timepicker.css
|
|
- combobox.css
|
|
- listbox.css
|
|
javascript:
|
|
- timepicker.js
|
|
icons:
|
|
- utility-sprite.svg
|
|
other_components:
|
|
- combobox
|
|
- listbox
|
|
- input
|
|
- icons
|
|
related_components:
|
|
- name: Datepickers
|
|
relationship: similar
|
|
description: Complementary component for date selection
|
|
- name: Datetime Picker
|
|
relationship: parent
|
|
description: Combined date and time selection component
|
|
- name: Input
|
|
relationship: alternative
|
|
description: Alternative for manual time entry
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/timepicker/
|
|
metadata:
|
|
version: 1.0.0
|
|
last_updated: '2025-11-12'
|
|
review_status: complete
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|