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
<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
- 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
- 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
- Code
Debe seleccionar por lo menos un personaje
<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
- Code
Debe seleccionar por lo menos un personaje
<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
- Code
Debe seleccionar por lo menos un personaje
<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>