Estilos

Componentes

Formularios

Organismos

Campo de selección (select)

El campo de selección permite a las personas usuarias elegir una opción de una lista de tres o más opciones preestablecidas. Generalmente, se usa en formularios.

Uso

Cuándo usar

  • Cuando la persona usuaria debe seleccionar una opción de una lista de más de 3 opciones.

Cuándo no usar

  • Cuando la persona usuaria necesite seleccionar más de una opción, utilizá el componente casilla de verificación
  • Cuando sea necesario que seleccionar una única opción de un conjunto de menos de 3 opciones, utilizá el botón de radio

Ejemplo de uso

El campo de selección se usa exclusivamente en formularios para elegir una única opción de una lista de 3 o más opciones preestablecidas, y, generalmente, requiere una acción de envío final para confirmar la selección.

Ejemplo de uso del campo de selección

Indicador de requerido y opcional

Indica si un campo es obligatorio u opcional, ayudando a las personas a completar el formulario con claridad. Podés consultar la ficha de patrones de formulario para conocer los lineamientos de uso del indicador.

Ejemplo del campo requerido

Contenidos

  • Evitar términos ambiguos o genéricos como "Seleccione una opción".
  • Texto de opciones breves. Cada opción dentro del selector no debe ocupar más de una línea. Considera un máximo de 3 a 5 palabras, o no más de 40 caracteres.
  • El contenido debe ser claro, conciso y comprensible de inmediato para la persona usuaria.
  • Evitar el uso de descripciones o explicaciones extensas dentro de la lista de opciones.
  • Máximo de 15 opciones. Recomendamos que la lista de opciones tenga un mínimo de 3 y un máximo de 15 opciones. De lo contrario, considera agregar una función de filtrado para seleccionar una opción.

Contenido en esta página

Campo de Selección (select)

Predeterminado

Campo de asistencia

<div class="form-label-container">
  <label for="input-select" class="form-label">
    Nombre del selector *
  </label>
</div>
<select class="form-control form-select" aria-label="Ejemplo de selección por defecto">
    <option value="0">Seleccionar</option>
    <option value="1">Opción</option>
    <option value="2">Opción</option>
    <option value="3">Opción</option>
</select>
<p class="form-label-description">Campo de asistencia</p>

Deshabilitado

Campo de asistencia

<div class="col-12 col-lg-6">
      <div class="form-label-container">  
        <label for="example-disabled-select" class='form-label disabled'>
          Ejemplo campo de selección.
        </label>
      </div>
      <select class="form-control form-select" aria-label="Ejemplo de input de selección por defecto" disabled>
        <option selected>Campo de selección</option>
        <option value="1">Opción</option>
        <option value="2">Opción</option>
        <option value="3">Opción</option>
      </select>
    </div>

Variantes

Anatomía

Anatomía del botón de select
ElementoCarácter
1. LabelObligatorio, indicá que tipo de información requiere el campo.
2. Campo de selecciónObligatorio, es el área donde aparecerá la opción seleccionada.
3. Indicador de requeridoOpcional, los campos pueden etiquetarse como obligatorios u opcionales según el contexto.
4. PlaceholderOpcional, puede usarse para ejemplificar el formato del dato esperado.
5. Icono derecho (expandir)Obligatorio. Se utiliza para indicar que el campo puede expandirse para mostrar las opciones.
6. Texto descriptivoOpcional pero recomendado, se utiliza para proporcionar ayuda o contexto adicional a la persona usuaria sobre la opción que tiene que seleccionar.

Estados

Predeterminado (default)

Estado predeterminado del campo de selección en una interfaz.

Ejemplo del campo de selección en estado predeterminado

En Foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Ejemplo del campo de selección en estado foco

Activo

Cuando un usuario está seleccionando una opción.

Ejemplo del campo de selección en estado activo

Completado

Indica que la persona usuaria seleccionó una opción de la lista expandible.

Ejemplo del campo de selección en estado completado

Error

Para garantizar la accesibilidad, el estado de error debe ser claramente perceptible. En los campos de texto, se utiliza un borde en color rojo con suficiente contraste. Esto asegura que todas las personas puedan identificar y corregir errores fácilmente, cumpliendo con las pautas de accesibilidad (WCAG).

Ejemplo del campo de selección en estado de error

Deshabilitado (disabled)

Estado que indica que el campo de selección no está disponible para la interacción, lo que significa que no puede activarse.

Ejemplo del campo de selección en estado deshabilitado

Contenido en esta página

Navegación alternativa

El componente de campo de selección está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando su estado (activo o deshabilitado) de forma clara.

TABENTERSPACE

Utilizando el tab la persona usuaria puede llegar hasta el campo de selección. Con la barra espaciadora (space), las flechas para arriba o abajo puede abrir el desplegable donde estarán las opciones a seleccionar. Las flechas, además, se usan para navegar a través de las opciones, las cuales pueden ser seleccionadas con la barra espaciadora o enter. En ese mismo acto se cierra el desplegable.

Ejemplo de navegacion alternativa del campo de selección

Etiquetado descriptivo

Utilizá el atributo for para asociar una etiqueta <label> con el elemento de formulario <select>, haciendo coincidir su valor con el atributo "id" del elemento correspondiente.

Para el campo de selección se debe utilizar la etiqueta <select>, la cual engloba las opciones a desplegarse. Se utiliza la etiqeta <option> para cada item.

<div class="form-label-container">  
  <label for="input-select" class="form-label">    
    Nombre del selector *  
  </label>
</div>
<select 
class="form-control form-select" 
id="input-select" 
aria-label="Ejemplo de selección por defecto">    
  <option value="0">Seleccionar</option>    
  <option value="1">Opción</option>    
  <option value="2">Opción</option>    
  <option value="3">Opción</option>
</select>
<p class="form-label-description">Campo de asistencia</p>

Criterios WCAG aplicables

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.4.6 Headings and Labels (Level AA)

Si se utilizan encabezados o etiquetas, deben describir con precisión el propósito o contenido al que se refieren. Esto facilita la comprensión y navegación del contenido, especialmente para personas con discapacidades cognitivas o que utilizan lectores de pantalla.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible. Cuando utiliza un teclado para navegar por los checkboxs, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Success Criterion 3.3.2 Labels or Instructions (Level A)

Asegúrese de que todo el texto de ayuda y los mensajes de error proporcionen asistencia significativa para ayudar a los usuarios a evitar o corregir errores.

Success Criterion 4.1.2 Name, Role, Value (Level A)

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Contenido en esta página

Navegación de pie de página