{
  "_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-foundation.v1.json",
  "apiVersion": "1.0.0",
  "name": "Select",
  "description": "Initializes select",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Select container. Acts as a form element wrapper; when rendering the dueling-list mode, also takes role='group' with an aria-labelledby pointing at the group legend.",
    "attributes": {
      "bound": {
        "role": {
          "prop": "groupRole"
        },
        "aria-labelledby": {
          "prop": "groupLabelledBy"
        }
      }
    },
    "children": [
      {
        "name": "label",
        "restrict": [
          "label",
          "span"
        ],
        "description": "Select label. Renders as a <label> for native single/multi modes (associated to the select via for/id), or as a <span> acting as a group legend in the dueling-list mode.",
        "attributes": {
          "bound": {
            "for": {
              "prop": "selectId"
            },
            "id": {
              "prop": "groupLabelId"
            }
          }
        },
        "slot": {
          "name": "label",
          "required": true
        }
      },
      {
        "name": "selectContainer",
        "restrict": [
          "div"
        ],
        "description": "Form-element control region. Hosts either a native select (wrapped by selectWrapper in single mode) or the duelingList structure.",
        "children": [
          {
            "name": "selectWrapper",
            "restrict": [
              "div"
            ],
            "description": "Wrapper around the native select element. Present in single-select mode; omitted by the narrow-multiple variant where the native multi-select sits directly inside selectContainer.",
            "renderWhen": {
              "prop": "mode",
              "eq": "single"
            },
            "children": [
              {
                "name": "select",
                "restrict": [
                  "select"
                ],
                "description": "Native select element",
                "attributes": {
                  "bound": {
                    "id": {
                      "prop": "selectId",
                      "required": true
                    },
                    "name": {
                      "prop": "name"
                    },
                    "disabled": {
                      "prop": "disabled"
                    },
                    "required": {
                      "prop": "required"
                    },
                    "multiple": {
                      "prop": "multiple"
                    },
                    "aria-describedby": {
                      "prop": "ariaDescribedBy"
                    }
                  }
                },
                "slot": {
                  "name": "default",
                  "restrict": [
                    "option"
                  ]
                },
                "children": [
                  {
                    "name": "option",
                    "restrict": [
                      "option"
                    ],
                    "description": "Native option element rendered inside the select"
                  }
                ]
              }
            ]
          },
          {
            "name": "duelingList",
            "restrict": [
              "div"
            ],
            "description": "Dueling list mode: a multi-select rendered as two side-by-side option groups with transfer buttons between them.",
            "renderWhen": {
              "prop": "mode",
              "eq": "duelingList"
            },
            "children": [
              {
                "name": "duelingListLiveRegion",
                "restrict": [
                  "div"
                ],
                "description": "Visually-hidden aria-live region announcing drag activity during keyboard reorder.",
                "attributes": {
                  "static": {
                    "aria-live": "assertive"
                  },
                  "bound": {
                    "id": {
                      "prop": "liveRegionId"
                    }
                  }
                }
              },
              {
                "name": "duelingListDragLabel",
                "restrict": [
                  "div"
                ],
                "description": "Visually-hidden description of drag/keyboard interactions. Referenced by each listbox via aria-describedby.",
                "attributes": {
                  "bound": {
                    "id": {
                      "prop": "dragLabelId"
                    }
                  }
                }
              },
              {
                "name": "duelingListSourceColumn",
                "restrict": [
                  "div"
                ],
                "description": "Left column: source listbox with its label.",
                "children": [
                  {
                    "name": "duelingListSourceLabel",
                    "restrict": [
                      "span"
                    ],
                    "description": "Label for the source listbox.",
                    "attributes": {
                      "bound": {
                        "id": {
                          "prop": "sourceLabelId"
                        }
                      }
                    }
                  },
                  {
                    "name": "duelingListSourceOptions",
                    "restrict": [
                      "div"
                    ],
                    "description": "Scroll container for the source listbox.",
                    "children": [
                      {
                        "name": "duelingListSourceListbox",
                        "restrict": [
                          "ul"
                        ],
                        "description": "Source listbox element.",
                        "attributes": {
                          "static": {
                            "role": "listbox",
                            "aria-multiselectable": "true"
                          },
                          "bound": {
                            "aria-labelledby": {
                              "prop": "sourceLabelId"
                            },
                            "aria-describedby": {
                              "prop": "dragLabelId"
                            }
                          }
                        },
                        "children": [
                          {
                            "name": "duelingListSourceItem",
                            "restrict": [
                              "li"
                            ],
                            "description": "Wrapper li carrying role='presentation' so the option role is sourced from the inner div.",
                            "attributes": {
                              "static": {
                                "role": "presentation"
                              }
                            },
                            "children": [
                              {
                                "name": "duelingListSourceOption",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Focusable option element.",
                                "attributes": {
                                  "static": {
                                    "role": "option",
                                    "draggable": "true"
                                  },
                                  "bound": {
                                    "aria-selected": {
                                      "prop": "selected"
                                    },
                                    "tabindex": {
                                      "prop": "tabindex"
                                    }
                                  }
                                },
                                "children": [
                                  {
                                    "name": "duelingListSourceOptionBody",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Media body wrapping the option label."
                                  },
                                  {
                                    "name": "duelingListSourceOptionLabel",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Truncating span carrying the visible option text."
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "name": "duelingListActionsColumn",
                "restrict": [
                  "div"
                ],
                "description": "Middle column: transfer buttons between the two listboxes.",
                "children": [
                  {
                    "name": "duelingListMoveButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Transfer button (left or right) moving selection between source and target listboxes.",
                    "children": [
                      {
                        "name": "duelingListMoveButtonIcon",
                        "description": "SVG glyph (left/right arrow).",
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "duelingListMoveButtonAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually-hidden text describing the transfer action."
                      }
                    ]
                  }
                ]
              },
              {
                "name": "duelingListTargetColumn",
                "restrict": [
                  "div"
                ],
                "description": "Right column: target listbox with its label.",
                "children": [
                  {
                    "name": "duelingListTargetLabel",
                    "restrict": [
                      "span"
                    ],
                    "description": "Label for the target listbox.",
                    "attributes": {
                      "bound": {
                        "id": {
                          "prop": "targetLabelId"
                        }
                      }
                    }
                  },
                  {
                    "name": "duelingListTargetOptions",
                    "restrict": [
                      "div"
                    ],
                    "description": "Scroll container for the target listbox.",
                    "children": [
                      {
                        "name": "duelingListTargetListbox",
                        "restrict": [
                          "ul"
                        ],
                        "description": "Target listbox element.",
                        "attributes": {
                          "static": {
                            "role": "listbox",
                            "aria-multiselectable": "true"
                          },
                          "bound": {
                            "aria-labelledby": {
                              "prop": "targetLabelId"
                            },
                            "aria-describedby": {
                              "prop": "dragLabelId"
                            }
                          }
                        },
                        "children": [
                          {
                            "name": "duelingListTargetItem",
                            "restrict": [
                              "li"
                            ],
                            "description": "Wrapper li carrying role='presentation'.",
                            "attributes": {
                              "static": {
                                "role": "presentation"
                              }
                            },
                            "children": [
                              {
                                "name": "duelingListTargetOption",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Focusable option element.",
                                "attributes": {
                                  "static": {
                                    "role": "option",
                                    "draggable": "true"
                                  },
                                  "bound": {
                                    "aria-selected": {
                                      "prop": "selected"
                                    },
                                    "tabindex": {
                                      "prop": "tabindex"
                                    }
                                  }
                                },
                                "children": [
                                  {
                                    "name": "duelingListTargetOptionBody",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Media body wrapping the option label."
                                  },
                                  {
                                    "name": "duelingListTargetOptionLabel",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Truncating span carrying the visible option text."
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "helpText",
        "restrict": [
          "div"
        ],
        "description": "Help/error text below select",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "helpText"
        }
      },
      {
        "name": "requiredIndicator",
        "restrict": [
          "abbr"
        ],
        "description": "Required field indicator rendered inside the label",
        "renderWhen": {
          "prop": "required",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "title": "required",
            "aria-hidden": "true"
          }
        }
      }
    ]
  },
  "states": [
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the select is disabled"
    },
    {
      "name": "required",
      "type": "boolean",
      "aria": "aria-required",
      "description": "Whether the select is required"
    },
    {
      "name": "multiple",
      "type": "boolean",
      "description": "Whether the native select accepts multiple selections"
    },
    {
      "name": "hasError",
      "type": "boolean",
      "description": "Whether the select has a validation error"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "label-association",
        "description": "Native select modes must have a label associated via for/id; dueling-list mode must expose role='group' with aria-labelledby on the root and aria-labelledby on each listbox."
      },
      {
        "id": "drag-live-region",
        "description": "Dueling-list mode must include an aria-live='assertive' region announcing keyboard-driven reorder actions."
      }
    ]
  },
  "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"
        }
      }
    }
  }
}