Components / Library version 3.26.0

Option

The option component can only be used within the select component.

Properties Examples Accessibility Notes
disabled
boolean
Disables the option.
selected
boolean
Sets the initial selection. Anything other than the bool False or the string "false" selects the option. If not specified, the first option is selected.
subinfo
string
This text will be displayed on the right side and italicized. See second option in the example. Select components of the Multiple variant do not allow for subinfo.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm

Code generated from HTML.

See the select component.
This component only accepts text. HTML markup is not supported.
(Do not write <wm-option>Option<b>one</b></wm-option>)

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.