`<bmx-option>`

One option for a bmx-select, written in markup rather than passed as data. It renders nothing at all: the select reads these elements once, turns them into the same array its options property takes, and draws the list itself.

5 properties · 0 events · 0 methods · 0 parts

Example

Show markup

<div class="row">
  <bmx-select label="Delivery" placeholder="Choose a speed" description="Written in markup rather than passed as data — the select reads these once and draws the list itself.">
    <bmx-option value="standard" label="Standard" description="Three to five days"></bmx-option>
    <bmx-option value="express" label="Express" description="Next working day"></bmx-option>
    <bmx-option value="collect" label="Click and collect" disabled></bmx-option>
  </bmx-select>
</div>

WHY IT IS DATA RATHER THAN A RENDERED ELEMENT

Because the select is virtualised. The whole point of windowing a list is that a thousand options cost twenty elements, and a thousand <bmx-option> elements in the light DOM would have cost a thousand before the select even started - the expense the virtualiser exists to avoid, paid up front and in the one place it cannot be recovered.

So this is the declarative front door, for markup a person writes by hand and for the plain-HTML case the library promises to support. Anything long enough to need virtualising is coming from data anyway, and belongs in the options property, which is also the only way to reach icon and the consumer's own matcher.

The two are not mixed: a select with a non-empty options property ignores its children entirely, because two sources of truth for a list is how a select ends up showing something the application does not think is there.

Properties

Property	Attribute	Type	Default	Description
`description`	`description`	`string`	—	Secondary text, under the label.
`disabled`	`disabled`	`boolean`	`false`	Whether it can be chosen.
`group`	`group`	`string`	—	The heading this option sits under. A heading appears whenever this changes from one option to the next, so the document order is the display order and nothing is regrouped on the author's behalf.
`label`	`label`	`string`	—	What the user reads. Falls back to the element's own text.
`value`	`value`	`string`	—	What the form receives when this option is chosen. Must be unique in its list.

Slots

Slot	Description
`(default)`	The option's label, when the `label` property is not set.