Select

Componente de entrada que permite al usuario seleccionar una opción de una lista desplegable predefinida. Ideal para elegir entre múltiples valores.

Uso básico

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

Si deseas que el usuario pueda seleccionar varias opciones usa el atributo multiple

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

Usa el componente Field para componer un select con una etiqueta, texto de ayuda y mensaje de error

tip

Para más información visita la documentación de field

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>

Colores

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>