{ "_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": "Combobox", "description": "A widget that provides a user with an input field that is either an autocomplete or readonly, accompanied with a listbox of pre-defined options.", "structure": { "name": "root", "restrict": [ "div" ], "description": "Combobox form-element container", "children": [ { "name": "label", "restrict": [ "label" ], "description": "Combobox label", "slot": { "name": "label", "required": true }, "attributes": { "static": { "class": "slds-form-element__label" } }, "modifiers": [ { "name": "assistiveLabel", "attribute": "class", "value": "slds-assistive-text", "description": "Visually hide the label while keeping it available to assistive tech (used by the object-switcher addon)" } ] }, { "name": "formElement", "restrict": [ "div" ], "description": "Form-element control wrapper that hosts the combobox and its companion regions", "children": [ { "name": "group", "restrict": [ "div" ], "description": "Container for a combobox group", "children": [ { "name": "groupAddonStart", "restrict": [ "div" ], "description": "The first combobox in the combobox group", "attributes": { "static": { "class": "slds-combobox_object-switcher slds-combobox-addon_start" } } }, { "name": "groupAddonEnd", "restrict": [ "div" ], "description": "The last combobox in the combobox group", "attributes": { "static": { "class": "slds-combobox_container slds-combobox-addon_end" } } } ], "renderWhen": { "prop": "layout", "eq": "grouped" }, "attributes": { "static": { "class": "slds-combobox-group" } }, "modifiers": [ { "name": "hasSelection", "attribute": "class", "value": "slds-has-selection", "description": "Modifier that notifies the combobox group that a selection has been made" } ] }, { "name": "container", "restrict": [ "div" ], "description": "Combobox container wrapper. Standalone (default) layout. The grouped variant reuses this shape inside each group addon.", "children": [ { "name": "objectSwitcherButton", "restrict": [ "div" ], "description": "Deprecated multi-entity object-switcher trigger button (sibling to combobox, lives inside container via .slds-listbox_object-switcher wrapper)", "children": [ { "name": "objectSwitcherTrigger", "restrict": [ "button" ], "description": "Trigger that opens the object-switcher menu", "attributes": { "static": { "aria-haspopup": "true", "class": "slds-button slds-button_icon" } }, "children": [ { "name": "objectSwitcherTriggerIcon", "restrict": [ "span" ], "description": "Icon representing the currently scoped entity", "attributes": { "static": { "class": "slds-icon_container" } }, "children": [ { "name": "objectSwitcherTriggerIconSvg", "restrict": [ "svg" ], "attributes": { "static": { "class": "slds-icon slds-icon_small", "aria-hidden": "true" } }, "children": [ { "name": "objectSwitcherTriggerIconUse", "restrict": [ "use" ] } ] }, { "name": "objectSwitcherTriggerAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "objectSwitcherTriggerCaret", "restrict": [ "svg" ], "description": "Down-caret indicating the trigger opens a menu", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_x-small slds-m-left_xxx-small" } }, "component": "PrimitiveIcon" } ] } ], "renderWhen": { "prop": "layout", "eq": "multiEntity" }, "attributes": { "static": { "class": "slds-listbox_object-switcher slds-dropdown-trigger slds-dropdown-trigger_click" } } }, { "name": "combobox", "restrict": [ "div" ], "description": "Combobox input wrapper", "attributes": { "bound": { "aria-expanded": { "prop": "isOpen" }, "aria-haspopup": { "prop": "popupType" } }, "static": { "class": "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" } }, "children": [ { "name": "inputWrapper", "restrict": [ "div" ], "description": "Wrapper around the input and any associated icons inside the combobox", "attributes": { "static": { "role": "none", "class": "slds-combobox__form-element" } }, "children": [ { "name": "inputEntityIcon", "restrict": [ "span" ], "description": "Leading entity icon shown when an option is selected (inline-listbox / lookup-selected layouts)", "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-icon_container slds-combobox__input-entity-icon" } }, "children": [ { "name": "inputEntityIconSvg", "restrict": [ "svg" ], "attributes": { "static": { "class": "slds-icon slds-icon_small", "aria-hidden": "true" } }, "children": [ { "name": "inputEntityIconUse", "restrict": [ "use" ] } ] }, { "name": "inputEntityIconAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "inputIconLeft", "restrict": [ "span" ], "description": "Leading utility/standard icon (e.g., scoping-results-icon variants)", "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-icon_container slds-input__icon slds-input__icon_left" } }, "children": [ { "name": "inputIconLeftSvg", "restrict": [ "svg" ], "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default", "aria-hidden": "true" } }, "children": [ { "name": "inputIconLeftUse", "restrict": [ "use" ] } ] }, { "name": "inputIconLeftAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "input", "restrict": [ "input" ], "description": "Input field within a combobox", "attributes": { "static": { "type": "text", "autocomplete": "off", "role": "combobox", "class": "slds-input slds-combobox__input" }, "bound": { "aria-controls": { "prop": "popupId" }, "aria-expanded": { "prop": "isOpen" }, "aria-haspopup": { "prop": "popupType" }, "aria-autocomplete": { "prop": "autocompleteMode" }, "aria-activedescendant": { "prop": "activeOptionId" } } }, "modifiers": [ { "name": "hasFocus", "attribute": "class", "value": "slds-has-focus", "description": "Force focus state of the input" }, { "name": "hasValue", "attribute": "class", "value": "slds-combobox__input-value", "description": "Applied when the input currently displays a chosen value (changes the displayed text styling)" } ] }, { "name": "inputFaux", "restrict": [ "div" ], "description": "Input field within a combobox", "renderWhen": { "prop": "mode", "eq": "selectOnly" }, "attributes": { "static": { "role": "combobox", "tabindex": "0", "class": "slds-input_faux slds-combobox__input" }, "bound": { "aria-controls": { "prop": "popupId" }, "aria-expanded": { "prop": "isOpen" }, "aria-haspopup": { "prop": "popupType" }, "aria-labelledby": { "prop": "labelId" } } }, "children": [ { "name": "inputFauxValue", "restrict": [ "span" ], "description": "Text label of the currently displayed value (truncates when overflowing)", "attributes": { "static": { "class": "slds-truncate" } } } ], "modifiers": [ { "name": "hasFocus", "attribute": "class", "value": "slds-has-focus", "description": "Force focus state of the input" }, { "name": "hasValue", "attribute": "class", "value": "slds-combobox__input-value", "description": "Applied when the faux input currently displays a chosen value" } ] }, { "name": "inputIconRight", "restrict": [ "span" ], "description": "Trailing icon container (e.g., utility-down caret, utility-search). May be a sibling of inputIconGroup or appear on its own.", "attributes": { "static": { "class": "slds-icon_container slds-input__icon slds-input__icon_right" } }, "variants": [ { "name": "spriteGlyph", "description": "Sprite glyph hook applied to the trailing icon container", "options": [ { "value": "utilityDown", "class": "slds-icon-utility-down", "description": "Down-caret indicating a closed dropdown" }, { "value": "utilitySearch", "class": "slds-icon-utility-search", "description": "Magnifying-glass icon on search-style inputs" } ] } ], "children": [ { "name": "inputIconRightSvg", "restrict": [ "svg" ], "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default", "aria-hidden": "true" } }, "modifiers": [ { "name": "extraSmall", "attribute": "class", "value": "slds-icon_xx-small", "description": "Smaller caret size used by the object-switcher addon" } ], "children": [ { "name": "inputIconRightUse", "restrict": [ "use" ] } ] }, { "name": "inputIconRightAssistiveText", "restrict": [ "span" ], "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "inputRemoveButton", "restrict": [ "button" ], "description": "Trailing 'remove selected option' button rendered when a value is set in lookup layouts", "renderWhen": { "prop": "showRemove", "eq": "true" }, "attributes": { "static": { "class": "slds-button slds-button_icon slds-input__icon slds-input__icon_right" } }, "children": [ { "name": "inputRemoveButtonIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "component": "PrimitiveIcon" }, { "name": "inputRemoveButtonAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "inputIconGroup", "restrict": [ "div" ], "description": "Trailing icon group that stacks a loading spinner alongside the remove button (typeahead-loading layouts)", "renderWhen": { "prop": "showInputIconGroup", "eq": "true" }, "attributes": { "static": { "class": "slds-input__icon-group slds-input__icon-group_right" } }, "children": [ { "name": "inputSpinner", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner", "role": "status" } }, "children": [ { "name": "inputSpinnerAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "inputSpinnerDotA", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-spinner__dot-a" } } }, { "name": "inputSpinnerDotB", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-spinner__dot-b" } } } ] }, { "name": "inputIconGroupRemoveButton", "restrict": [ "button" ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-input__icon slds-input__icon_right" } }, "children": [ { "name": "inputIconGroupRemoveButtonIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "component": "PrimitiveIcon" }, { "name": "inputIconGroupRemoveButtonAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ], "variants": [ { "name": "inputIconLayout", "description": "Which side(s) the input carries icons on. Drives the .slds-input-has-icon_* class.", "options": [ { "value": "right", "class": "slds-input-has-icon slds-input-has-icon_right", "description": "Trailing icon only (most common)" }, { "value": "leftRight", "class": "slds-input-has-icon slds-input-has-icon_left-right", "description": "Both leading and trailing icons" }, { "value": "groupRight", "class": "slds-input-has-icon slds-input-has-icon_group-right", "description": "Trailing icon group (spinner + remove button)" } ] } ] }, { "name": "listbox", "restrict": [ "div" ], "description": "Listbox dropdown panel. Mutually exclusive with the popover (dialog) variant below.", "renderWhen": { "prop": "dropdownType", "eq": "listbox" }, "attributes": { "static": { "role": "listbox", "class": "slds-dropdown slds-dropdown_fluid" }, "bound": { "aria-busy": { "prop": "isLoading" } } }, "children": [ { "name": "listboxList", "restrict": [ "ul" ], "description": "Inner list element. Carries role=presentation in flat lists and role=group when the listbox is segmented.", "children": [ { "name": "listboxItem", "restrict": [ "li" ], "description": "Listbox row wrapper", "repeats": true, "children": [ { "name": "listboxOption", "restrict": [ "div" ], "description": "Option row rendered as media object", "attributes": { "static": { "role": "option", "class": "slds-media slds-listbox__option" }, "bound": { "aria-selected": { "prop": "isSelected" } } }, "children": [ { "name": "optionFigure", "restrict": [ "span" ], "description": "Leading figure (icon or check)", "children": [ { "name": "optionIconContainer", "restrict": [ "span" ], "description": "Wrapper around the option's sprite icon", "children": [ { "name": "optionIconSvg", "restrict": [ "svg" ], "description": "Sprite icon", "attributes": { "static": { "class": "slds-icon", "aria-hidden": "true" } }, "modifiers": [ { "name": "small", "attribute": "class", "value": "slds-icon_small", "description": "Small icon size (entity rows)" }, { "name": "xSmall", "attribute": "class", "value": "slds-icon_x-small", "description": "Extra-small icon size (selected check, scoping glyphs)" }, { "name": "iconTextDefault", "attribute": "class", "value": "slds-icon-text-default", "description": "Tints the icon to default text color (search-term row)" } ], "children": [ { "name": "optionIconUse", "restrict": [ "use" ] } ] }, { "name": "optionIconAssistiveText", "restrict": [ "span" ], "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-icon_container" } }, "modifiers": [ { "name": "currentColor", "attribute": "class", "value": "slds-current-color", "description": "Tints the icon to currentColor (used for selected indicator + scoping icons)" } ], "variants": [ { "name": "spriteGlyph", "description": "Sprite glyph hook applied to the icon container (standard/utility sprites observed in blueprints)", "options": [ { "value": "standardAccount", "class": "slds-icon-standard-account" }, { "value": "standardOpportunity", "class": "slds-icon-standard-opportunity" }, { "value": "utilityApex", "class": "slds-icon-utility-apex" }, { "value": "utilityCheck", "class": "slds-icon-utility-check" }, { "value": "utilityRules", "class": "slds-icon-utility-rules" }, { "value": "utilitySearch", "class": "slds-icon-utility-search" }, { "value": "utilitySignpost", "class": "slds-icon-utility-signpost" }, { "value": "utilitySnippet", "class": "slds-icon-utility-snippet" } ] } ] }, { "name": "optionSelectedSvg", "restrict": [ "svg" ], "description": "Inline 'selected' check rendered directly inside the figure (deprecated readonly variant)", "renderWhen": { "prop": "showInlineSelectedCheck", "eq": "true" }, "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-listbox__icon-selected", "aria-hidden": "true" } }, "children": [ { "name": "optionSelectedSvgUse", "restrict": [ "use" ] } ] } ], "attributes": { "static": { "class": "slds-media__figure" } }, "modifiers": [ { "name": "asOptionIcon", "attribute": "class", "value": "slds-listbox__option-icon", "description": "Container for listbox option icon" } ] }, { "name": "optionBody", "restrict": [ "span" ], "description": "Body cell that holds the primary text and optional metadata", "children": [ { "name": "optionText", "restrict": [ "span" ], "description": "Primary text line. Uses .slds-truncate for plain options and .slds-listbox__option-text (+ _entity) for entity rows.", "children": [ { "name": "optionTextHighlight", "restrict": [ "mark" ], "description": "Highlighted match fragment inside the option text (typeahead)", "renderWhen": "propFilled" }, { "name": "optionTextAssistiveText", "description": "Optional assistive prefix for screen readers (e.g., 'Current Selection:')", "restrict": [ "span" ], "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "variants": [ { "name": "textStyle", "description": "Which primary-text hook to apply", "options": [ { "value": "truncate", "class": "slds-truncate", "description": "Plain options truncate the title" }, { "value": "entity", "class": "slds-listbox__option-text slds-listbox__option-text_entity", "description": "Entity option primary text" } ] } ] }, { "name": "optionMeta", "restrict": [ "span" ], "description": "Secondary metadata line on entity options", "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-listbox__option-meta slds-listbox__option-meta_entity" } } } ], "attributes": { "static": { "class": "slds-media__body" } } }, { "name": "optionHeader", "restrict": [ "h3" ], "description": "Header for choosable option within listbox", "renderWhen": { "prop": "kind", "eq": "header" }, "attributes": { "static": { "role": "presentation", "class": "slds-listbox__option-header" } } } ], "modifiers": [ { "name": "mediaSmall", "attribute": "class", "value": "slds-media_small", "description": "Small media spacing used by plain options" }, { "name": "mediaCenter", "attribute": "class", "value": "slds-media_center", "description": "Vertically centers the figure with the body (used by deprecated readonly check rows)" }, { "name": "isSelected", "attribute": "class", "value": "slds-is-selected", "description": "Marks the option as currently selected" }, { "name": "hasFocus", "attribute": "class", "value": "slds-has-focus", "description": "Marks the option as currently focused / highlighted" } ], "variants": [ { "name": "kind", "description": "Option content style", "options": [ { "value": "plain", "class": "slds-listbox__option_plain", "description": "Single-line text option" }, { "value": "entity", "class": "slds-listbox__option_entity", "description": "Entity option with primary text and optional meta (used in lookup results)" }, { "value": "hasMeta", "class": "slds-listbox__option_has-meta", "description": "Entity option that includes a second metadata line" }, { "value": "term", "class": "slds-listbox__option_term", "description": "Search-term suggestion row at the top of typeahead results" } ] } ] } ], "slot": { "name": "options", "required": true }, "attributes": { "static": { "class": "slds-listbox__item", "role": "presentation" } } }, { "name": "loadingItem", "restrict": [ "li" ], "description": "Loading-state row appended to the bottom of the listbox while results are streaming in", "renderWhen": { "prop": "loading", "eq": "true" }, "children": [ { "name": "loadingItemSpinner", "restrict": [ "div" ], "description": "Spinner control announcing 'loading' to assistive tech", "attributes": { "static": { "role": "status" } } }, { "name": "loadingItemCenter", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-align_absolute-center slds-p-top_medium" } }, "children": [ { "name": "loadingItemSpinner", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-spinner slds-spinner_x-small slds-spinner_inline", "role": "status" } }, "children": [ { "name": "loadingItemSpinnerAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "loadingItemSpinnerDotA", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-spinner__dot-a" } } }, { "name": "loadingItemSpinnerDotB", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-spinner__dot-b" } } } ] } ] } ], "attributes": { "static": { "class": "slds-listbox__item", "role": "option" } } } ], "attributes": { "static": { "class": "slds-listbox slds-listbox_vertical", "role": "presentation" } }, "modifiers": [ { "name": "asGroup", "attribute": "role", "value": "group", "description": "Object-switcher listbox uses role=group on the inner ul instead of presentation" } ] } ], "modifiers": [ { "name": "length5", "attribute": "class", "value": "slds-dropdown_length-5", "description": "Caps the visible options list at five rows (plain options)" }, { "name": "lengthWithIcon7", "attribute": "class", "value": "slds-dropdown_length-with-icon-7", "description": "Caps the visible options list at seven rows (entity options with icons)" }, { "name": "alignLeft", "attribute": "class", "value": "slds-dropdown_left", "description": "Aligns the dropdown to the left edge (used by the object-switcher addon)" }, { "name": "widthXSmall", "attribute": "class", "value": "slds-dropdown_x-small", "description": "Constrains the dropdown to a narrow width (used by the object-switcher addon)" } ] }, { "name": "popover", "restrict": [ "section" ], "description": "Dialog popover dropdown (dialog variant) hosting arbitrary content (e.g., a checkbox group) in place of a listbox", "renderWhen": { "prop": "dropdownType", "eq": "dialog" }, "attributes": { "static": { "role": "dialog", "class": "slds-popover slds-popover_full-width" }, "bound": { "aria-describedby": { "prop": "popoverBodyId" }, "aria-label": { "prop": "popoverLabel" } } }, "children": [ { "name": "popoverBody", "restrict": [ "div" ], "description": "Scrollable region of the popover", "attributes": { "static": { "role": "region", "tabindex": "0", "class": "slds-popover__body slds-popover__body_small" } }, "slot": { "name": "popoverBody", "required": true }, "children": [ { "name": "popoverMedia", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-media" } }, "children": [ { "name": "popoverMediaBody", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-media__body" } }, "children": [ { "name": "popoverFieldset", "description": "Optional fieldset that wraps a checkbox-group (with-checkbox-group story)", "restrict": [ "fieldset" ], "attributes": { "static": { "class": "slds-form-element" } }, "children": [ { "name": "popoverFieldsetLegend", "restrict": [ "legend" ], "attributes": { "static": { "class": "slds-form-element__legend slds-form-element__label" } } }, { "name": "popoverFieldsetControl", "restrict": [ "div" ], "attributes": { "static": { "class": "slds-form-element__control" } }, "children": [ { "name": "popoverCheckbox", "restrict": [ "div" ], "repeats": true, "attributes": { "static": { "class": "slds-checkbox" } }, "children": [ { "name": "popoverCheckboxLabel", "restrict": [ "label" ], "attributes": { "static": { "class": "slds-checkbox__label" } }, "children": [ { "name": "popoverCheckboxFaux", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "popoverCheckboxText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-form-element__label" } } } ] } ] } ] } ] } ] } ] } ] }, { "name": "popoverFooter", "restrict": [ "footer" ], "description": "Action row at the bottom of the popover (e.g., Cancel + Done)", "slot": { "name": "popoverFooter" }, "attributes": { "static": { "class": "slds-popover__footer slds-popover__footer_form" } }, "children": [ { "name": "popoverFooterButton", "restrict": [ "button" ], "repeats": true, "attributes": { "static": { "class": "slds-button" } }, "variants": [ { "name": "buttonStyle", "description": "Footer button style", "options": [ { "value": "neutral", "class": "slds-button_neutral", "description": "Secondary action (e.g., Cancel)" }, { "value": "brand", "class": "slds-button_brand", "description": "Primary action (e.g., Done)" } ] } ] } ] } ], "modifiers": [ { "name": "hidden", "attribute": "class", "value": "slds-popover_hide", "description": "Visually hides the popover while keeping it in the DOM" } ] } ] } ], "attributes": { "static": { "class": "slds-combobox_container" } }, "modifiers": [ { "name": "hasSelection", "attribute": "class", "value": "slds-has-selection", "description": "Apply when a combobox has a selection" }, { "name": "hasInlineListbox", "attribute": "class", "value": "slds-has-inline-listbox", "description": "Deprecated inline-listbox layout where the listbox renders inline with the input" }, { "name": "hasObjectSwitcher", "attribute": "class", "value": "slds-has-object-switcher", "description": "Deprecated multi-entity layout indicator: an object-switcher button precedes the input" }, { "name": "hasInputFocus", "attribute": "class", "value": "slds-has-input-focus", "description": "Deprecated multi-entity layout: input within container currently has focus" }, { "name": "hasIconOnly", "attribute": "class", "value": "slds-has-icon-only", "description": "Icon only variant of a combobox" } ] }, { "name": "selectionGroup", "restrict": [ "div" ], "description": "The container of pill selections found inside of a combobox group", "renderWhen": { "prop": "showSelectionPills", "eq": "true" }, "children": [ { "name": "selectionToggle", "restrict": [ "span" ], "description": "Toggle button to show all of the pill selections", "renderWhen": "propFilled", "attributes": { "static": { "aria-hidden": "true", "class": "slds-listbox-toggle" } }, "children": [ { "name": "selectionToggleButton", "restrict": [ "button" ], "description": "Button that toggles the collapsed/expanded state of the pill list", "attributes": { "static": { "class": "slds-button" } } } ] }, { "name": "selectionPillsList", "restrict": [ "ul" ], "description": "Horizontal list of selected-option pills", "attributes": { "bound": { "aria-label": { "prop": "selectionListLabel" } }, "static": { "class": "slds-listbox slds-listbox_horizontal" } }, "children": [ { "name": "selectionPillItem", "restrict": [ "li" ], "description": "Pill list row", "repeats": true, "children": [ { "name": "selectionPill", "restrict": [ "span" ], "description": "Pill representing one selected option", "children": [ { "name": "selectionPillIcon", "restrict": [ "span" ], "description": "Leading entity icon for the pill", "renderWhen": "propFilled", "attributes": { "static": { "class": "slds-icon_container slds-pill__icon_container" } }, "children": [ { "name": "selectionPillIconSvg", "restrict": [ "svg" ], "attributes": { "static": { "class": "slds-icon", "aria-hidden": "true" } }, "children": [ { "name": "selectionPillIconUse", "restrict": [ "use" ] } ] }, { "name": "selectionPillIconAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "selectionPillLabel", "restrict": [ "span" ], "description": "Pill text label", "attributes": { "static": { "class": "slds-pill__label" } } }, { "name": "selectionPillRemove", "restrict": [ "span" ], "description": "Remove-pill affordance wrapper. The icon_container wrapper carries .slds-pill__remove; the inner button repeats it (matches blueprint markup).", "children": [ { "name": "selectionPillRemoveButton", "restrict": [ "button" ], "description": "Button that removes the option from the selection", "attributes": { "static": { "class": "slds-button slds-button_icon slds-pill__remove" } }, "children": [ { "name": "selectionPillRemoveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "component": "PrimitiveIcon" }, { "name": "selectionPillRemoveAssistiveText", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ], "attributes": { "static": { "class": "slds-icon_container slds-pill__remove" } } } ], "attributes": { "static": { "class": "slds-pill" } } } ], "attributes": { "static": { "class": "slds-listbox-item" } } } ], "modifiers": [ { "name": "topPaddingXxxSmall", "attribute": "class", "value": "slds-p-top_xxx-small", "description": "Adds an extra-extra-extra-small top padding above the pill list (deprecated layouts)" } ] } ], "attributes": { "static": { "class": "slds-listbox_selection-group" } } } ], "attributes": { "static": { "class": "slds-form-element__control" } } } ], "attributes": { "static": { "class": "slds-form-element" } } }, "states": [ { "name": "open", "type": "boolean", "aria": "aria-expanded", "description": "Whether dropdown is open" }, { "name": "disabled", "type": "boolean", "aria": "aria-disabled", "description": "Whether combobox is disabled" }, { "name": "required", "type": "boolean", "aria": "aria-required", "description": "Whether selection is required" }, { "name": "hasError", "type": "boolean", "description": "Whether the combobox has a validation error" }, { "name": "loading", "type": "boolean", "aria": "aria-busy", "description": "Whether the combobox is loading results" }, { "name": "focused", "type": "boolean", "description": "Whether the combobox input has focus" }, { "name": "expanded", "type": "boolean", "description": "Whether the combobox is rendered in its expanded shape (used by deprecated multi-entity layouts)" } ], "accessibility": { "requirements": [ { "id": "combobox-role", "description": "Input wrapper or faux-input element must carry role='combobox'" }, { "id": "listbox-role", "description": "Listbox dropdown must carry role='listbox'" }, { "id": "dialog-role", "description": "Dialog dropdown must carry role='dialog' and an accessible label" }, { "id": "keyboard-navigation", "description": "Arrow keys navigate options, Enter selects, Escape closes" }, { "id": "live-loading-status", "description": "Loading rows announce 'loading' via role='status'" } ] }, "extensions": { "com.salesforce-ux": { "dateAdded": "2017-03-01", "genReady": false, "lbc": "lightning-combobox" } }, "cssSource": "./combobox.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "open", "class": "slds-is-open" }, { "state": "focused", "class": "slds-has-focus" }, { "state": "hasError", "class": "slds-has-error" }, { "state": "expanded", "class": "slds-is-expanded" } ], "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" } } } } }