Select

.form-select usa el <select> nativo con el mismo estilo que form-input: funciona con teclado y en móvil abre el selector del sistema.

Básico

Para mostrar un texto inicial, agrega una primera opción con value="", disabled y selected. Con required, el formulario no se envía hasta elegir otra opción.

MóvilTabletEscritorioCompleto

HTML

<div class="form-field">
  <label class="form-label" for="servicio">Servicio</label>
  <select class="form-select" id="servicio" name="servicio" required>
    <option value="" disabled selected>Elige un servicio</option>
    <option value="web">Desarrollo web</option>
    <option value="diseno">Diseño UX/UI</option>
    <option value="hosting">Hosting</option>
  </select>
</div>

React

export default function SelectBasico() {
  return (
    <div className="form-field">
      <label className="form-label" htmlFor="servicio">Servicio</label>
      <select className="form-select" id="servicio" name="servicio" required defaultValue="">
        <option value="" disabled>Elige un servicio</option>
        <option value="web">Desarrollo web</option>
        <option value="diseno">Diseño UX/UI</option>
        <option value="hosting">Hosting</option>
      </select>
    </div>
  );
}

Tamaños

MóvilTabletEscritorioCompleto

HTML

<select class="form-select form-select--sm" aria-label="Ejemplo pequeño">
  <option value="1">Pequeño</option>
  <option value="2">Opción 2</option>
</select>
<select class="form-select" aria-label="Ejemplo normal">
  <option value="1">Normal</option>
  <option value="2">Opción 2</option>
</select>
<select class="form-select form-select--lg" aria-label="Ejemplo grande">
  <option value="1">Grande</option>
  <option value="2">Opción 2</option>
</select>

React

export default function SelectTamanos() {
  return (
    <>
      <select className="form-select form-select--sm" aria-label="Ejemplo pequeño">
        <option value="1">Pequeño</option>
        <option value="2">Opción 2</option>
      </select>
      <select className="form-select" aria-label="Ejemplo normal">
        <option value="1">Normal</option>
        <option value="2">Opción 2</option>
      </select>
      <select className="form-select form-select--lg" aria-label="Ejemplo grande">
        <option value="1">Grande</option>
        <option value="2">Opción 2</option>
      </select>
    </>
  );
}

Múltiple

Con multiple o size mayor que 1, el select muestra la lista abierta, sin flecha.

MóvilTabletEscritorioCompleto

HTML

<div class="form-field">
  <label class="form-label" for="intereses">Intereses</label>
  <select class="form-select" id="intereses" name="intereses" multiple size="4" aria-describedby="intereses-ayuda">
    <option value="web" selected>Desarrollo web</option>
    <option value="apps">Apps móviles</option>
    <option value="ux" selected>Diseño UX/UI</option>
    <option value="marketing">Marketing digital</option>
  </select>
  <p class="form-helper" id="intereses-ayuda">Mantén presionada la tecla Ctrl (o Cmd) para elegir varios.</p>
</div>

React

export default function SelectMultiple() {
  return (
    <div className="form-field">
      <label className="form-label" htmlFor="intereses">Intereses</label>
      <select className="form-select" id="intereses" name="intereses" multiple size="4" aria-describedby="intereses-ayuda" defaultValue={["web","ux"]}>
        <option value="web">Desarrollo web</option>
        <option value="apps">Apps móviles</option>
        <option value="ux">Diseño UX/UI</option>
        <option value="marketing">Marketing digital</option>
      </select>
      <p className="form-helper" id="intereses-ayuda">Mantén presionada la tecla Ctrl (o Cmd) para elegir varios.</p>
    </div>
  );
}

Deshabilitado y validación

Funcionan igual que en los campos de texto: atributo disabled, y aria-invalid="true" o is-valid para la validación.

Accesibilidad

• Conecta el label con for e id, o usa aria-label.
• Para más de 15 opciones, o si hay que buscar, conviene un campo con sugerencias.
• Un select múltiple es difícil de usar en escritorio (hay que mantener Ctrl o Cmd). Para pocas opciones, usa checkboxes.

Clases

Clase	Uso
form-select	Select.
form-select--sm, form-select--lg	Tamaños.

Variables

Usa las mismas variables que form-input: revisa la tabla en Campos de texto. La flecha es un SVG gris en background-image: para un fondo oscuro, cámbiala en el CSS del sitio.