Estilos

Componentes

Formularios

Organismos

Campo de búsqueda (search)

El campo de búsqueda ayuda a los usuarios a encontrar rápidamente el contenido que necesitan, sin tener que recorrer manualmente la navegación de la página.

Uso

Cuándo usar

  • Cuando la persona usuaria necesita hacer una búsqueda general que sea el disparador de la navegación en la página, por ejemplo en una página de trámites buscar "Otorgamiento de licencia"
  • Cuando la persona usuaria necesite filtrar en tiempo real contenido de un conjunto de opciones establecidas.

Cuándo usar

  • Para consultas complejas que involucran varias palabras clave o una sintaxis específica.
  • Cuando haya cantidad pequeñas o limitadas de datos.
  • Cuando la información sea sencilla y se puede encontrar fácilmente.

Tipos

Este componente permite a los usuarios buscar contenido de forma rápida, sin necesidad de navegar por diferentes secciones. Incluye un campo de entrada con un ícono de lupa y presenta dos variantes según el estado de uso:

Tipos de campo de búsqueda

Buscador con accionable. Se utiliza para búsquedas centrales de la página y en secciones sin contexto claro.

Tipos de campo de búsqueda

Buscador sin accionable. Se utiliza para búsquedas internas dentro de una sección ya contextualizada, como buscar por nombre y apellido

Ejemplo de uso

Búsquedas relacionadas con base de datos

Se utiliza cuando la información a buscar no está disponible localmente en la interfaz y necesita ser consultada en una fuente externa por ejemplo, una base de datos.

Ejemplo de uso del campo de búsqueda

Filtrado de opciones disponibles

Puede ser útil en formularios, o secciones con contenido preestablecido, para encontrar información rápidamente. Generalmente, el contenido se va ajustando automáticamente a medida que la persona usuaria escribe.

Ejemplo de uso del campo de búsqueda

Contenido

Etiquetas claras y concisas

Las etiquetas son opcionales en un componente de búsqueda, sin embargo, se usan para identificar y describir el propósito de la búsqueda. Escribí el texto de la etiqueta con mayúscula inicial solo al comienzo, y sé claro y lo más conciso posible.

Texto de marcador de posición (placeholder)

Usar únicamente texto de marcador de posición genera problemas de accesibilidad, ya que no es leído por los lectores de pantalla y desaparece cuando el usuario comienza a escribir. Cuando uses un marcador de posición en una búsqueda, asegurate de que no contenga información importante sobre cómo usar el campo.

Contenido en esta página

Buscador

  <form>
    <div class="form-label-container">
      <label for="search" class="form-label">Ejemplo Buscador</label>
    </div>
    <div class='search-container'>
      <input type="search" class="form-control input-search" id="search" placeholder="Buscar..." name="search" aria-label="Campo de búsqueda" />
      <button class="reset" type="reset" aria-label="Borrar"></button>
    </div>
  </form>

Buscador con botón

  <form>
    <div class="form-label-container">
      <label for="search-btn" class="form-label">Ejemplo Buscador con botón</label>
    </div>
    <div class='search-container'>
      <input type="search" class="form-control input-search input-search-with-button" id="search-btn" placeholder="Buscar..." name="search" aria-label="Campo de búsqueda" />
      <button class="reset" type="reset" aria-label="Borrar"></button>
      <button class="button-search" type="submit" aria-label="Buscar"></button>
    </div>
  </form>

Deshabilitado

  <form>
    <div class="form-label-container">
      <label for="search-btn" class="form-label disabled">Ejemplo Buscador deshabilitado</label>
    </div>
    <div class='search-container'>
      <input type="search" class="form-control input-search input-search-with-button" id="search-btn" placeholder="Buscar..." name="search" aria-label="Campo de búsqueda" disabled />
      <button class="reset" type="reset" aria-label="Borrar"></button>
    </div>
  </form>

Variantes

Anatomía

Anatomía de la casilla de verificación
ElementoCarácter
1. Etiqueta (label)Opcional, puede reforzar que tipo de información requiere el campo.
2. Indicador de requeridoOpcional, los campos pueden etiquetarse como obligatorios u opcionales según el contexto.
3. PlaceholderOpcional, puede usarse para ejemplificar el formato del dato esperado.
4. Campo (inputField)Obligatorio, es el área donde las personas usuarias ingresan el texto.
5. Texto descriptivoOpcional pero recomendado, se utiliza para proporcionar ayuda o contexto adicional a la persona usuaria sobre el dato que tiene que ingresar.

Estados

Predeterminado (default)

Estado predeterminado del buscador en una interfaz.

Ejemplo del campo de búsqueda en estado predeterminado

En foco (focus)

Es un principio de accesibilidad que garantiza que el campo de búsqueda sea claramente visible cuando recibe el foco, especialmente al ser navegado con el teclado. En Obelisco, esto se indica mediante un borde o anillo (focus ring) alrededor del campo en un color distintivo, lo que ayuda a la persona usuaria a identificar dónde está interactuando.

Ejemplo del campo de búsqueda en estado de foco

Activo

Es el estado en el que el campo de búsqueda está en foco y la persona usuaria está escribiendo. Este estado suele destacarse visualmente mediante un cambio de color, borde o sombra para indicar que el componente está listo para recibir texto.

Ejemplo del campo de búsqueda en estado activo

Completado

Es el estado del componente cuando la persona usuaria ha ingresado texto en el campo de búsqueda. Se muestra una interfaz con una cruz a la derecha para borrar el contenido y una lupa como botón para ejecutar la búsqueda, indicando que el campo está listo para ser usado.

Ejemplo del campo de búsqueda en estado completado

Deshabilitado (disabled)

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

Ejemplo del campo de búsqueda en estado deshabilitado

Espaciados

La separación vertical entre elementos es de 8px tanto para dispositivos desktop como mobile.

Podes consultar la ficha de patrones de formulario para conocer la separación entre secciones.

Ejemplo del campo de búsqueda con espaciados

Contenido en esta página

Navegación alternativa

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

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Ejemplo de navegacion alternativa del botón de radio

Etiquetado descriptivo

El buscador siempre debe tener una etiqueta <label> clara y relacionada con la acción que representa.

El <label> es clave para que las personas que usan tecnologías asistivas, como lectores de pantalla, entiendan para qué sirve el buscador.

El atributo "for" asocia un <label> con un elemento de formulario como un <input>, <select>, <textarea>, etc. mediante el "id" del elemento objetivo.

Interactividad limitada

Cuando un componente de buscador está deshabilitado temporalmente, es importante indicarlo correctamente mediante el atributo "disabled". Además, debe evitarse que el foco del teclado llegue al componente, y debe comunicarse su estado a tecnologías de asistencia.

<form> 
  <div class="form-label-container"> 
    <label for="search" class="form-label">Ejemplo Buscador</label>  
  </div>
  <div class='search-container'>  
    <input
      type="search"
      class="form-control input-search"
      id="search"
      placeholder="Buscar..."
      name="search"
      aria-label="Campo de búsqueda"
    />  
    <button class="reset" type="reset" aria-label="Borrar"></button> 
  </div>
</form>

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.1 Bypass Blocks (Level A)

Para ayudar a los usuarios de lectores de pantalla en la navegación, cada búsqueda debe estar dentro de una región de landmark (hito) ARIA. Cada instancia debe tener una etiqueta única de identificación, a menos que las búsquedas duplicadas realicen la misma función.

Success Criterion 2.4.5 Multiple Ways (Level AA)

Considera usar un mecanismo de búsqueda para ayudar a los usuarios a localizar información fácilmente y de múltiples maneras La búsqueda permite a los usuarios encontrar información de manera más fácil y precisa, incluyendo a personas con discapacidades visuales, limitaciones cognitivas u otras discapacidades.

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 componentes, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Contenido en esta página

Navegación de pie de página