# Select
## Usage This component ships a `select()` macro for Jinja and Nunjucks. ```html ``` ```html
``` ### HTML structure
<div class="select">
Select root. Supports data-placeholder, data-close-on-select="true", and data-format="object".
<button type="button">
Trigger button. Use aria-haspopup="listbox", aria-expanded, and aria-controls.
<div data-popover aria-hidden="true">
Popover content. Supports data-side and data-align through the shared popover rules.
<div role="listbox">
Options container. Add aria-multiselectable="true" for multiple selection.
<div role="option" data-value="..." data-label="...">
Selectable option. data-value is submitted. data-label is optional and controls the selected display label and data-format="object" label; when omitted, Basecoat uses trimmed text content.
<hr role="separator"> Optional
Separator between groups or options.
<div role="group"> Optional
Option group. Use aria-labelledby to connect it to its heading.
<span role="heading"> Optional
Group heading.
<input type="hidden">
Submitted value. Single select stores a string; multiselect stores a JSON array. With data-format="object", values are serialized as { value, label } objects.
### JavaScript API | API | Type | Description | | --- | --- | --- | | `change` | Event | Dispatched on selection changes with `event.detail.value` and `event.detail.selected`. | | `select.refresh()` | Method | Rescans options after children change inside the existing `role="listbox"` element. | ## Examples ### Align Use `data-align` on the popover to align the list to the trigger edge. Basecoat keeps the popup below the control; it does not implement shadcn/ui's selected-item-over-trigger positioning.
### Groups
### Scrollable
### Disabled
### Invalid

Select a role to continue.

 ### With icon
### Multiple Enable multiple selection by adding `aria-multiselectable="true"` to the `listbox`. The selected options are displayed as a comma-separated list in the trigger button. Use `data-label` to specify clean text labels for options that contain HTML (like icons), otherwise the text content will be extracted automatically.
### RTL Set `dir="rtl"` on the select root or a parent element.