Holo Select
The <holo-select> component is a form-associated custom element that wraps a native <select> in
its shadow root, styled to match the design system. Wrapping (rather than reimplementing) a native
listbox gives full native keyboard, screen-reader, and mobile picker-UI behavior for free. Set the
options property (an array of { value, label, disabled? } objects) from JavaScript.
Live Previews
Section titled “Live Previews”Default
Section titled “Default”<holo-select label="Favorite fruit" placeholder="Choose a fruit"></holo-select><script> const select = document.querySelector('holo-select'); select.options = [ { value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }, { value: 'pear', label: 'Pear', disabled: true }, ];</script>Invalid
Section titled “Invalid”<holo-select label="Favorite fruit" placeholder="Choose a fruit" invalid error-message="Please select a fruit."></holo-select>Disabled
Section titled “Disabled”<holo-select label="Favorite fruit" value="apple" disabled></holo-select>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ---------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
| label | label | The visible label text for the select. | string | undefined |
| name | name | The form field name submitted with the owning form. | string | undefined |
| options | — | The list of selectable options. | SelectOption[] ({ value, label, disabled? }) | [] |
| value | value | The value of the currently selected option. | string | "" |
| placeholder | placeholder | Placeholder text shown as a disabled first option when no value is selected. | string | undefined |
| disabled | disabled | If true, the select is disabled and non-interactive. | boolean | false |
| required | required | If true, a value must be selected for the owning form to submit. | boolean | false |
| invalid | invalid | Marks the select as invalid. | boolean | false |
| errorMessage | error-message | Error message shown when invalid is true. | string | undefined |
Events
Section titled “Events”| Event | Description | Type |
| ------------ | ---------------------------------------- | --------------------- |
| holoChange | Emitted when the selected value changes. | CustomEvent<string> |