<div class="select">Wraps around the entire component. Can have the following attributes:
+data-placeholder="{ TEXT }" Optional: placeholder text shown when no options are selected (multiselect only).<button type="button" popovertarget="{ POPOVER_ID }"><button type="button">The trigger to open the popover, can also have the following attributes:
+The trigger to open the popover. Should have the following attributes:
id="{BUTTON_ID}": linked to by the aria-labelledby attribute of the listbox.aria-haspopup="listbox": indicates that the button opens a listbox.aria-controls="{ LISTBOX_ID }": points to the listbox's id.aria-expanded="false": tracks the popover's state.aria-activedescendant="{ OPTION_ID }": points to the active option's id.aria-activedescendant="{ OPTION_ID }" Optional: points to the active option's id.<div popover class="popover" id="{ POPOVER_ID }">data-side and data-align attributes.
+ <div data-popover aria-hidden="true" id="{ POPOVER_ID }">data-side and data-align attributes (see Popover component).
<div role="listbox">The listbox containing the options. Should have the following attributes:
id="{ LISTBOX_ID }": refered to by the aria-controls attribute of the trigger.aria-labelledby="{ BUTTON_ID }": linked to by the button's id attribute.aria-multiselectable="true" Optional: enables multiple selection mode.<div role="option" data-value="{ VALUE }">aria-activedescendant attribute on the trigger.Option that can be selected. Should have the following attributes:
+id="{ OPTION_ID }" Optional: unique id for this option (needed if you use aria-activedescendant on the trigger).data-value="{ VALUE }": the value for this option.data-label="{ LABEL }" Optional: the text label to use for this option when selected in multiple mode. If not provided, the option's text content will be used (HTML stripped).aria-selected="true" Optional: indicates this option is selected.<hr role="separator"> Optional<div role="group"> Optionalaria-labelledby attribute to link to a heading.<span role="heading"><span role="heading"> Optionalid attribute if you use the aria-labelledby attribute on the group.<input type="hidden" name="{ NAME }" value="{ VALUE }"> Optional<input type="hidden" name="{ NAME }" value="{ VALUE }">The hidden input that holds the selected value.
+For multiselect: multiple hidden inputs with the same name will be created (one for each selected value). When no options are selected, a single input with an empty value is submitted.
+Note: This differs slightly from native <select multiple> behavior, which submits nothing when empty. This allows the component to work without JavaScript for initial rendering while maintaining a simpler architecture.
basecoat:popoverbasecoat:popover event on document. Other popover components (Combobox, Dropdown Menu, Popover and Select) listen for this to close any open popovers.changechange event on itself, with the selected value in event.detail (e.g. { detail: { value: "something" }}).When the selected value changes, the component dispatches a custom (bubbling) change event on itself, with the selected value in event.detail:
{ detail: { value: "something" }}{ detail: { value: "last-changed", values: ["item1", "item2"] }}selectByValueselectByValue(value)You can call this method on the component after it is initialized to select an option by value (i.e. the option with the matching data-value attribute):
Selects an option by value (i.e. the option with the matching data-value attribute). For single-select, this will close the popover. For multiselect, this adds the value to the selection without removing existing selections.
selectAll() Multiselect onlySelects all available options. Only available when the component is in multiselect mode (aria-multiselectable="true").
selectNone() Multiselect onlyDeselects all options. Only available when the component is in multiselect mode (aria-multiselectable="true").
Enable multiple selection by setting multiple=true. 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.