Components

Select

A dropdown for choosing from a list of options.

Usage

Basic

HTML

<bs:bsui-select placeholder="Pick a region">
  <bs:bsui-select-trigger />
  <bs:bsui-select-popup>
    <bs:bsui-select-option value="eu" label="Europe" />
    <bs:bsui-select-option value="us" label="United States" />
    <bs:bsui-select-option value="ap" label="Asia Pacific" />
  </bs:bsui-select-popup>
</bs:bsui-select>

Multiple

Several values at once, listed in the trigger as they are picked.

HTML

<bs:bsui-select multiple="true" name="stack" placeholder="Pick your stack">
  <bs:bsui-select-trigger />
  <bs:bsui-select-popup>
    <bs:bsui-select-option value="wordpress" label="WordPress" />
    <bs:bsui-select-option value="laravel" label="Laravel" />
    <bs:bsui-select-option value="astro" label="Astro" />
    <bs:bsui-select-option value="rails" label="Rails" />
  </bs:bsui-select-popup>
</bs:bsui-select>

Unavailable option

The group submits pro until someone changes it, and enterprise is visible but cannot be picked.

HTML

<bs:bsui-select name="plan" defaultValue="pro" placeholder="Pick a plan">
  <bs:bsui-select-trigger />
  <bs:bsui-select-popup>
    <bs:bsui-select-option value="free" label="Free" />
    <bs:bsui-select-option value="pro" label="Pro" />
    <bs:bsui-select-option value="enterprise" label="Enterprise, contact sales" disabled="true" />
  </bs:bsui-select-popup>
</bs:bsui-select>

In a field

The error message hangs off the field, so the select itself stays unchanged.

Region

Pick the region your data has to stay in.

HTML

<bs:bsui-field invalid="true">
  <bs:bsui-field-label text="Region" />
  <bs:bsui-select name="region" placeholder="Pick a region">
    <bs:bsui-select-trigger />
    <bs:bsui-select-popup>
      <bs:bsui-select-option value="eu" label="Europe" />
      <bs:bsui-select-option value="us" label="United States" />
    </bs:bsui-select-popup>
  </bs:bsui-select>
  <bs:bsui-field-error text="Pick the region your data has to stay in." />
</bs:bsui-field>

Anatomy

Select is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/select
bsui/select-popup
bsui/select-option
bsui/select-trigger

Attributes

Attribute	Type	Default
`defaultValue`	`text`	—
`multiple`	`toggle`	`false`
`name`	`text`	—
`placeholder`	`text`	`Select...`
`nameAlt`	`text`	—
`onChange`	`text`	—
`value`	`text`	—
`options`	`text`	—

`bsui/select-popup`

This block takes no attributes.

`bsui/select-option`

Attribute	Type	Default
`value`	`text`	—
`label`	`text`	—
`disabled`	`toggle`	`false`

`bsui/select-trigger`

This block takes no attributes.