Select

npm2.0.0

The select input component allows users to select an option from a dropdown list of options. The options are displayed when the user clicks on the select input.

Example

Provides a dropdown menu for selecting one or more options from a list.

select

Option One

Option Two

Option Three

message text

code

<script type="module">
  import '@blueprintui/components/include/select.js';
</script>

<bp-field>
  <label>select</label>
  <bp-select>
    <bp-option value="1">Option One</bp-option>
    <bp-option value="2" selected>Option Two</bp-option>
    <bp-option value="3">Option Three</bp-option>
  </bp-select>
  <bp-field-message>message text</bp-field-message>
</bp-field>

Vertical

Demonstrates the select in vertical form layout.

label

option one

option two

option three

message text

disabled

option one

option two

option three

disabled message

error

option one

option two

option three

error message

success

option one

option two

option three

success message

code

<bp-form-group layout="vertical">
  <bp-field layout="vertical">
    <label>label</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>disabled</label>
    <bp-select disabled>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="error">
    <label>error</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="success">
    <label>success</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

Demonstrates the select in horizontal form layout.

label

option one

option two

option three

message text

disabled

option one

option two

option three

disabled message

error

option one

option two

option three

error message

success

option one

option two

option three

success message

code

<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-select disabled>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

Demonstrates the select in compact form layout.

label

option one

option two

option three

message text

disabled

option one

option two

option three

disabled message

error

option one

option two

option three

error message

success

option one

option two

option three

success message

code

<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>label</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-select disabled>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-select>
      <bp-option>option one</bp-option>
      <bp-option>option two</bp-option>
      <bp-option>option three</bp-option>
    </bp-select>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/select.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/select.js/+esm';
</script>

Select Input Component

Usage

The Select Input component provides a dropdown list to select a value from a set of predefined options.

Accessibility

The currently focused option should be highlighted as the user navigates the options with the keyboard.
The Select Input component should have a descriptive label or aria-label attribute if no visible label is present.

bp-select

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description
`options`	`BpOption[]`

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border`
`--border-radius`
`--outline`
`--outline-offset`
`--padding`
`--font-size`
`--line-height`
`--height`
`--min-width`
`--cursor`
`--width`

Slots

Name	Types	Description
`default`		For projecting select and label