DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Barra de búsqueda

Navegación

Consiste en una caja que permite introducir texto. Este componente se emplea para que el usuario pueda realizar búsquedas de contenido en el sitio web o en una vista.

Searchbar

Por defecto

Descripción visual

Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Incluye label "Buscar" en texto negro pequeño arriba del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-1",
  "label": {
    "text": "Buscar",
    "classes": "not-sr-only mb-sm"
  }
}) }}

Con placeholder

Descripción visual

Campo de búsqueda rectangular con borde gris claro de 1px y fondo blanco. Texto placeholder "Buscar en este sitio" en gris claro visible dentro del campo. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.

Mostrar códigodel ejemplo: Con placeholder

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-2",
  "label": {
    "text": "Buscar"
  },
  "placeholder": "Buscar en este sitio"
}) }}

Deshabilitado

Descripción visual

Campo de búsqueda rectangular con borde gris muy claro de 1px y fondo gris claro(#f5f5f5) . El campo aparece sin texto ni placeholder visible. Botón de búsqueda con icono de lupa en azul oscuro alineado a la derecha dentro del campo.

Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-3",
  "label": {
    "text": "Buscar"
  },
  "disabled": true
}) }}

Con mensaje de error

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Descripción visual

Barra de búsqueda con input de texto rectangular con borde rojo de 2px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. Debajo del input aparece un mensaje de error en texto rojo pequeño. Encima del campo hay un título descriptivo en texto negro normal.

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-4",
  "label": {
    "text": "Buscar"
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "mt-xs"
  }
}) }}

Con label visible

Descripción visual

Barra de búsqueda con input de texto rectangular con borde gris de 1px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. Encima del input hay un label descriptivo en texto negro pequeño. El campo tiene altura estándar con espaciado interno generoso.

Mostrar códigodel ejemplo: Con label visible

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-label-visible",
  "label": {
    "text": "Buscar items recientes",
    "classes": "not-sr-only mb-sm"
  }
}) }}

Peque

Descripción visual

Barra de búsqueda con input de texto rectangular de altura reducida, borde gris claro de 1px, fondo blanco, y botón de búsqueda(ícono de lupa) alineado a la derecha dentro del campo. No presenta label superior ni mensajes auxiliares. Las dimensiones verticales son compactas con espaciado interno mínimo.

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-5",
  "label": {
    "text": "Buscar"
  },
  "classes": "c-input--sm",
  "buttonClasses": "m-xs p-0.5 text-xs"
}) }}

Botón personalizado

Añade parámetros del componente Botón para sustituir el icono de la lupa con un botón junto al input.

Descripción visual

Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón "Buscar" de fondo azul petróleo con texto blanco en mayúsculas está alineado a la derecha del input. El campo ocupa todo el ancho disponible con altura estándar.

Mostrar códigodel ejemplo: Botón personalizado

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-6",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--primary"
  },
  "classes": "flex-1"
}) }}

Botón personalizado pequeño

Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.

Descripción visual

Campo de búsqueda con input de texto rectangular con borde gris de 1px y fondo blanco. Botón "Buscar" compacto con borde azul petróleo y texto azul petróleo está posicionado a la derecha del input. El campo ocupa todo el ancho disponible con altura reducida.

Mostrar códigodel ejemplo: Botón personalizado pequeño

Contenido

Nunjucks macro
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-7",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--sm"
  },
  "classes": "flex-1 c-input--sm"
}) }}