{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "Timepicker", "description": "Initializes a timepicker", "structure": { "name": "root", "restrict": [ "div" ], "description": "Initializes a timepicker", "children": [ { "name": "label", "restrict": [ "label" ], "description": "Time input label", "slot": { "name": "label", "required": true }, "children": [ { "name": "requiredIndicator", "restrict": [ "abbr" ], "description": "Required-field indicator rendered before the label text", "renderWhen": { "prop": "required", "eq": "true" }, "attributes": { "static": { "title": "required", "aria-hidden": "true", "class": "slds-required" } } } ], "attributes": { "static": { "class": "slds-form-element__label" } } }, { "name": "control", "restrict": [ "div" ], "description": "Form-element control wrapper around the combobox", "children": [ { "name": "comboboxContainer", "restrict": [ "div" ], "description": "Outer combobox container", "children": [ { "name": "combobox", "restrict": [ "div" ], "description": "Initializes a timepicker", "children": [ { "name": "formElement", "restrict": [ "div" ], "description": "Inline form-element wrapper that holds the input and the trailing clock icon", "attributes": { "static": { "role": "none", "class": "slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" } }, "children": [ { "name": "input", "restrict": [ "input" ], "description": "Text input that acts as the combobox trigger", "attributes": { "static": { "type": "text", "role": "combobox", "autocomplete": "off", "aria-autocomplete": "list", "aria-haspopup": "listbox", "class": "slds-input slds-combobox__input" }, "bound": { "aria-expanded": { "prop": "open" }, "aria-controls": { "prop": "dropdownId" }, "aria-activedescendant": { "prop": "activeOptionId" }, "placeholder": { "prop": "placeholder" }, "value": { "prop": "value" }, "id": { "prop": "inputId" } }, "conditional": { "disabled": { "when": "disabled", "value": "" } } } }, { "name": "inputIcon", "restrict": [ "span" ], "description": "Trailing clock icon container inside the input", "children": [ { "name": "inputIconGlyph", "description": "Clock SVG glyph rendered inside the trailing icon container", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default" } }, "children": [ { "name": "inputIconGlyphUse", "attributes": { "static": {} } } ] } ], "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-clock slds-input__icon slds-input__icon_right" } } } ] }, { "name": "dropdown", "restrict": [ "div" ], "description": "Dropdown panel that lists selectable times", "attributes": { "static": { "role": "listbox", "tabindex": "0", "aria-busy": "false", "class": "slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" }, "bound": { "id": { "prop": "dropdownId" }, "aria-label": { "prop": "dropdownLabel" } } }, "children": [ { "name": "listbox", "restrict": [ "ul" ], "description": "Listbox of time options", "attributes": { "static": { "role": "presentation", "class": "slds-listbox slds-listbox_vertical" } }, "children": [ { "name": "listboxItem", "restrict": [ "li" ], "description": "Wrapper list item for each time option", "repeats": true, "attributes": { "static": { "role": "presentation", "class": "slds-listbox__item" } }, "children": [ { "name": "option", "restrict": [ "div" ], "description": "Selectable time option row", "attributes": { "static": { "role": "option", "class": "slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" }, "bound": { "id": { "prop": "optionId" }, "aria-selected": { "prop": "selected" }, "aria-checked": { "prop": "checked" } } }, "children": [ { "name": "optionIcon", "restrict": [ "span" ], "description": "Leading figure that hosts the selected-state check icon (empty when not selected)", "children": [ { "name": "optionSelectedIcon", "restrict": [ "span" ], "description": "Check-icon container shown only when the option is selected", "renderWhen": { "prop": "selected", "eq": "true" }, "children": [ { "name": "optionSelectedIconGlyph", "description": "Check SVG glyph", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon slds-icon_x-small" } }, "children": [ { "name": "optionSelectedIconGlyphUse", "attributes": { "static": {} } } ] } ], "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-check slds-current-color" } } } ], "attributes": { "static": { "class": "slds-media__figure slds-listbox__option-icon" } } }, { "name": "optionBody", "restrict": [ "span" ], "description": "Body of the option row that wraps the time label", "children": [ { "name": "optionLabel", "restrict": [ "span" ], "description": "Truncating text label for the option (e.g. '7:00am')", "attributes": { "static": { "class": "slds-truncate" } } } ], "attributes": { "static": { "class": "slds-media__body" } } } ] } ] } ] } ] } ], "attributes": { "static": { "class": "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-timepicker" } } } ], "attributes": { "static": { "class": "slds-combobox_container" } } } ], "attributes": { "static": { "class": "slds-form-element__control" } } }, { "name": "help", "restrict": [ "div" ], "description": "Inline help / error message rendered after the control", "renderWhen": "slotFilled", "slot": { "name": "help" }, "attributes": { "static": { "class": "slds-form-element__help" } } } ], "attributes": { "static": { "class": "slds-form-element" } } }, "states": [ { "name": "disabled", "type": "boolean", "aria": "aria-disabled", "description": "Whether the timepicker is disabled" }, { "name": "required", "type": "boolean", "aria": "aria-required", "description": "Whether the timepicker is required" }, { "name": "open", "type": "boolean", "aria": "aria-expanded", "description": "Whether the timepicker dropdown is open" }, { "name": "focused", "type": "boolean", "description": "Whether the timepicker input has focus" }, { "name": "error", "type": "boolean", "description": "Whether the timepicker is in an error state" }, { "name": "selected", "type": "boolean", "aria": "aria-selected", "description": "Whether a dropdown option is the currently selected time" }, { "name": "errorIcon", "type": "boolean", "description": "Whether the component is in the errorIcon state" } ], "accessibility": { "requirements": [ { "id": "combobox-pattern", "description": "Follow the ARIA 1.2 combobox pattern: the input carries role='combobox' with aria-controls pointing at the listbox, aria-haspopup='listbox', and aria-expanded reflecting open state." }, { "id": "listbox-role", "description": "The dropdown panel must carry role='listbox' and each selectable row must carry role='option'." }, { "id": "active-descendant", "description": "Keyboard focus stays on the input; aria-activedescendant on the input points at the focused option's id." }, { "id": "required-indicator", "description": "When required, the visual asterisk must be aria-hidden so that aria-required (or required) on the input is the canonical signal." }, { "id": "error-message", "description": "Inline error help text must be associated with the input via aria-describedby." } ] }, "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2017-03-01", "genReady": false, "lbc": "lightning-timepicker" } }, "cssSource": "./timepicker.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "open", "class": "slds-is-open" }, { "state": "error", "class": "slds-has-error" }, { "state": "focused", "class": "slds-has-focus" }, { "state": "selected", "class": "slds-is-selected" }, { "state": "disabled", "class": "slds-is-disabled" }, { "state": "errorIcon", "class": "slds-icon-text-error" } ] }