{
  "_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": "Picklist",
  "description": "Read-only single-selection dropdown that pairs a faux input trigger with a listbox of selectable options, surfacing the current choice and toggling an overlay dropdown of `slds-lookup__item-action` items.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./picklist.deprecated.css",
  "styleApi": {
    "status": "deprecated",
    "ready": false
  },
  "deprecated": {
    "since": "2.0.0",
    "replacement": {
      "component": "Combobox"
    },
    "message": "`.slds-picklist` has been replaced with `.slds-combobox`. A picklist should use the readonly version of a combobox."
  },
  "structure": {
    "name": "picklist",
    "restrict": [
      "div"
    ],
    "description": "Root picklist container that also serves as the dropdown trigger context for the options list.",
    "attributes": {
      "static": {
        "class": "slds-picklist slds-dropdown-trigger"
      }
    },
    "modifiers": [
      {
        "name": "fluid",
        "attribute": "class",
        "value": "slds-picklist_fluid",
        "description": "Resets the explicit picklist width so the input, label, dropdown, and lookup contents flex to the parent (capped at the picklist's max sizing token)."
      },
      {
        "name": "clickTrigger",
        "attribute": "class",
        "value": "slds-dropdown-trigger_click",
        "description": "Marks the dropdown as click-activated (paired with `slds-is-open` when expanded)."
      }
    ],
    "children": [
      {
        "name": "formElement",
        "restrict": [
          "div"
        ],
        "description": "SLDS form-element wrapper that hosts the label and input control.",
        "attributes": {
          "static": {
            "class": "slds-form-element"
          }
        },
        "children": [
          {
            "name": "control",
            "restrict": [
              "div"
            ],
            "description": "Outer form-element control that groups the label and the input wrapper.",
            "attributes": {
              "static": {
                "class": "slds-form-element__control"
              }
            },
            "children": [
              {
                "name": "label",
                "restrict": [
                  "label"
                ],
                "description": "Visible label associated with the picklist input via for/id.",
                "attributes": {
                  "static": {
                    "class": "slds-form-element__label"
                  }
                }
              },
              {
                "name": "inputWrapper",
                "restrict": [
                  "div"
                ],
                "description": "Positioning context for the readonly input and its trailing toggle icon button.",
                "attributes": {
                  "static": {
                    "class": "slds-form-element__control slds-input-has-icon slds-input-has-icon_right slds-picklist__input"
                  }
                },
                "children": [
                  {
                    "name": "input",
                    "restrict": [
                      "input"
                    ],
                    "description": "Readonly text input that displays the currently selected option label.",
                    "attributes": {
                      "static": {
                        "class": "slds-lookup__search-input slds-input"
                      }
                    }
                  },
                  {
                    "name": "toggleButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Icon button at the inline-end edge that opens and closes the options dropdown.",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_icon slds-input__icon slds-text-color_default"
                      }
                    },
                    "children": [
                      {
                        "name": "toggleIcon",
                        "description": "Down-chevron glyph rendered inside the toggle button.",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon"
                          }
                        },
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "toggleAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden label announcing the toggle action (e.g., 'Expand category options').",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "dropdown",
        "restrict": [
          "div"
        ],
        "description": "Overlay dropdown that contains the options listbox; rendered when the picklist is open.",
        "attributes": {
          "static": {
            "class": "slds-dropdown slds-dropdown_left slds-dropdown_length-5"
          }
        },
        "children": [
          {
            "name": "optionsList",
            "restrict": [
              "ul"
            ],
            "description": "Unordered list that wraps the selectable option items.",
            "attributes": {
              "static": {
                "class": "slds-dropdown__list"
              }
            },
            "children": [
              {
                "name": "option",
                "restrict": [
                  "li"
                ],
                "description": "Presentational list item that wraps a single selectable option action.",
                "repeats": true,
                "children": [
                  {
                    "name": "optionAction",
                    "restrict": [
                      "span"
                    ],
                    "description": "Interactive option action exposing the label and selected-state checkmark.",
                    "attributes": {
                      "static": {
                        "class": "slds-lookup__item-action slds-lookup__item-action_label"
                      }
                    },
                    "children": [
                      {
                        "name": "selectedIcon",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Checkmark glyph that is visually shown when the option is selected.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small slds-shrink-none"
                          }
                        }
                      },
                      {
                        "name": "optionLabel",
                        "restrict": [
                          "span"
                        ],
                        "description": "Truncated text label for the option.",
                        "attributes": {
                          "static": {
                            "class": "slds-truncate"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "selected",
      "class": "slds-is-selected"
    },
    {
      "state": "focused",
      "class": "slds-has-focus"
    }
  ],
  "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"
        }
      }
    }
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    },
    {
      "name": "selected",
      "type": "boolean",
      "description": "Whether the component is in the selected state"
    },
    {
      "name": "focused",
      "type": "boolean",
      "description": "Whether the component is in the focused state"
    }
  ]
}