Select

An input component that allows the user to select an option from a predefined dropdown list. Ideal for choosing from multiple values.

Basic Usage

Mario BrossLuigi BrossKoopa TroopaDonkey Kong

<select class="select">
  <option value="1">Mario Bross</option>
  <option value="2">Luigi Bross</option>
  <option value="3">Koopa Troopa</option>
  <option value="4">Donkey Kong</option>
</select>

Multiple

If you want the user to be able to select multiple options, use the multiple attribute.

Preview

Mario BrossLuigi BrossKoopa TroopaDonkey Kong

Code

<select class="select" multiple="">
  <option value="1">Mario Bross</option>
  <option value="2">Luigi Bross</option>
  <option value="3">Koopa Troopa</option>
  <option value="4">Donkey Kong</option>
</select>

Disabled

Preview

Mario BrossLuigi BrossKoopa TroopaDonkey Kong

Code

<select class="select" disabled="">
  <option value="1">Mario Bross</option>
  <option value="2">Luigi Bross</option>
  <option value="3">Koopa Troopa</option>
  <option value="4">Donkey Kong</option>
</select>

Field

Use the Field component to compose a select with a label, help text, and error message.

tip

For more information, visit the field documentation.

Preview

Seleccione un personajeMario BrossLuigi BrossKoopa TroopaDonkey KongDebe seleccionar por lo menos un personaje

Code

<div class="field">
  <label class="label">Seleccione un personaje</label>
  <select class="select">
    <option value="1">Mario Bross</option>
    <option value="2">Luigi Bross</option>
    <option value="3">Koopa Troopa</option>
    <option value="4">Donkey Kong</option>
  </select>
  <span class="help">Debe seleccionar por lo menos un personaje</span>
</div>

Colors

is-valid

Preview

Seleccione un personajeMario BrossLuigi BrossKoopa TroopaDonkey KongDebe seleccionar por lo menos un personaje

Code

<div class="field is-valid">
  <label class="label">Seleccione un personaje</label>
  <select class="select">
    <option value="1">Mario Bross</option>
    <option value="2">Luigi Bross</option>
    <option value="3">Koopa Troopa</option>
    <option value="4">Donkey Kong</option>
  </select>
  <span class="help">Debe seleccionar por lo menos un personaje</span>
</div>

is-invalid

Preview

Seleccione un personajeMario BrossLuigi BrossKoopa TroopaDonkey KongDebe seleccionar por lo menos un personaje

Code

<div class="field is-invalid">
  <label class="label">Seleccione un personaje</label>
  <select class="select">
    <option value="1">Mario Bross</option>
    <option value="2">Luigi Bross</option>
    <option value="3">Koopa Troopa</option>
    <option value="4">Donkey Kong</option>
  </select>
  <span class="help">Debe seleccionar por lo menos un personaje</span>
</div>