DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Selector

Formularios

Es un elemento de formulario que permite escribir para filtrar entre una lista de opciones y seleccionar una. Combina un campo de texto con un listado de opciones predefinidas.

Combobox

Por defecto

Descripción visual

Combobox con dropdown desplegable cerrado. Label gris oscuro pequeño posicionado arriba. Campo rectangular con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo alineado a la derecha del input.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "default",
  "name": "provincia",
  "label": {
    "text": "Provincia"
  },
  "autocomplete": "both",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Selección múltiple

Usa el parámetro multiselect: true para permitir varias selecciones. En este caso al seleccionar un item el elemento no se cerrará.

Descripción visual

Combobox con label negro encima. Campo rectangular con borde gris, fondo blanco e icono de chevron a la derecha, con texto de ayuda gris para filtrar. Al desplegarse muestra la lista de opciones. Puede tener varias opciones seleccionadas. Las seleccionadas aparecen en negrita con un checkmark a la izquierda. El combobox permanece abierto al elegir varias.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Selección múltiple

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "multiselect",
  "name": "provincias",
  "label": {
    "text": "Provincias"
  },
  "multiselect": true,
  "autocomplete": "list",
  "placeholder": "Escribe para filtrar...",
  "items": [
    {
      "text": "Huesca",
      "selected": true
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid",
      "selected": true
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con estado activo

Simula activar la pseudo-clase de CSS :active. En realidad sólo se usa para documentar estos ejemplos.

Descripción visual

Combobox con dropdown desplegable cerrado. Label gris oscuro pequeño posicionado arriba. Campo rectangular con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo alineado a la derecha del input.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con estado activo

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "with-active-state",
  "name": "provincia-active",
  "label": {
    "text": "Provincia"
  },
  "classes": "ds-active",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con estado focus

Simula activar la pseudo-clase de CSS :focus. En realidad sólo se usa para documentar estos ejemplos.

Descripción visual

Combobox con dropdown desplegable cerrado. Label gris oscuro pequeño posicionado arriba. Campo rectangular con borde amarillo/dorado de 2-3px grosor destacado, fondo blanco, y ícono de chevron gris oscuro alineado a la derecha del input.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con estado focus

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "with-focus-state",
  "name": "provincia-focus",
  "label": {
    "text": "Provincia"
  },
  "classes": "ds-focus",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con placeholder

Usa el parámetro placeholder para mostrar texto de ayuda en el campo vacío.

Descripción visual

Combobox con label negro encima, campo desplegable con borde gris de 1px y fondo blanco. El campo muestra texto gris claro interno alineado a la izquierda, con icono de flecha gris apuntando hacia abajo en el extremo derecho.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con placeholder

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "with-placeholder",
  "name": "provincia-placeholder",
  "label": {
    "text": "Provincia"
  },
  "placeholder": "Escribe para buscar...",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con autocomplete list

Usa autocomplete: 'list' para filtrar las opciones sin autocompletar inline en el campo de texto.

Descripción visual

Combobox con label negro encima, campo desplegable rectangular con borde gris de 1px y fondo blanco. Campo de entrada de altura mediana con icono de flecha gris hacia abajo alineado a la derecha, sin texto interno visible.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con autocomplete list

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "autocomplete-list",
  "name": "provincia-list",
  "label": {
    "text": "Provincia"
  },
  "autocomplete": "list",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con valor por defecto

Usa defaultValue y el parámetro selected: true en un item para preseleccionar una opción.

Descripción visual

Combobox con label negro encima, campo desplegable con borde gris de 1px y fondo blanco. El campo contiene texto negro alineado a la izquierda e icono de flecha gris apuntando hacia abajo en el borde derecho.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con valor por defecto

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "with-default-value",
  "name": "provincia-default",
  "label": {
    "text": "Provincia"
  },
  "defaultValue": "Zaragoza",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza",
      "selected": true
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con hint

Usa el componente hint para proporcionar información adicional al usuario.

Descripción visual

Combobox con label de texto pequeño en negro posicionado encima del campo. Dropdown rectangular con borde gris de 1px, fondo blanco, esquinas redondeadas y flecha desplegable gris a la derecha. Texto de ayuda gris claro en tamaño pequeño ubicado debajo del campo desplegable.

Selecciona la provincia donde resides actualmente.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con hint

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "with-hint",
  "name": "provincia-hint",
  "label": {
    "text": "Provincia"
  },
  "hint": {
    "text": "Selecciona la provincia donde resides actualmente."
  },
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con mensaje de error

Usa errorMessage para mostrar el estado de error.

Descripción visual

Combobox con label negro en tamaño estándar posicionado arriba del campo. Dropdown rectangular con borde rojo de 2px, fondo blanco, esquinas redondeadas y flecha desplegable a la derecha. Mensaje de validación en rojo ubicado debajo del campo, en tamaño pequeño.

Error:Selecciona una provincia válida.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "with-error",
  "name": "provincia-error",
  "label": {
    "text": "Provincia"
  },
  "errorMessage": {
    "text": "Selecciona una provincia válida."
  },
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Peque

Descripción visual

Combobox pequeño con label visible en tamaño reducido. Campo rectangular compacto con borde gris, fondo blanco, texto pequeño y flecha desplegable alineada a la derecha.

  • Opción 1
  • Opción 2
  • Opción 3
Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "combobox-sm",
  "name": "combobox-sm",
  "classes": "c-combobox--sm",
  "label": {
    "text": "Esto es un label",
    "classes": "text-sm"
  },
  "items": [
    {
      "text": "Opción 1"
    },
    {
      "text": "Opción 2",
      "selected": true
    },
    {
      "text": "Opción 3"
    }
  ]
}) }}

Grande

Label solo visible para lectores de pantalla.

Descripción visual

Combobox con label de texto pequeño en negro posicionado encima del campo. Campo desplegable rectangular con borde gris de 1px, fondo blanco, altura aproximada de 48px, con icono de flecha hacia abajo en el extremo derecho. Esquinas ligeramente redondeadas.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "large",
  "name": "provincia-large",
  "label": {
    "text": "Provincia",
    "classes": "sr-only"
  },
  "classes": "px-4 py-3 text-lg",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Deshabilitado

Usa disabled: true para deshabilitar el combobox.

Descripción visual

Combobox con label de texto pequeño en negro posicionado encima del campo. Campo desplegable rectangular con borde gris claro de 1px, fondo gris muy claro (#f5f5f5 aproximadamente), altura estándar de 40px, con icono de flecha hacia abajo atenuado en el extremo derecho. Esquinas ligeramente redondeadas, apariencia visualmente inactiva.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "disabled",
  "name": "provincia-disabled",
  "label": {
    "text": "Provincia"
  },
  "disabled": true,
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con clases en container

Usa classesContainer para aplicar clases CSS al contenedor del combobox.

Descripción visual

Combobox con label de texto pequeño en negro posicionado encima del campo. Campo desplegable rectangular con borde turquesa/cyan de 2px, fondo celeste muy claro, altura estándar de 40px, con icono de flecha hacia abajo en el extremo derecho. Esquinas ligeramente redondeadas, contenedor con fondo turquesa claro que envuelve todo el componente.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Con clases en container

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "classes-container",
  "name": "provincia-classes",
  "label": {
    "text": "Provincia"
  },
  "classesContainer": "inline-block p-base bg-primary-light",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Ancho completo

Utiliza classes: "w-full" para que el combobox ocupe todo el ancho disponible.

Descripción visual

Combobox que ocupa todo el ancho del contenedor. Label gris oscuro pequeño posicionado arriba. Campo rectangular a ancho completo con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo pegado al borde derecho del input.

  • Huesca
  • Zaragoza
  • Teruel
  • Barcelona
  • Madrid
  • Valencia
Mostrar códigodel ejemplo: Ancho completo

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "full-width",
  "name": "provincia-full",
  "label": {
    "text": "Provincia"
  },
  "classes": "w-full",
  "autocomplete": "both",
  "items": [
    {
      "text": "Huesca"
    },
    {
      "text": "Zaragoza"
    },
    {
      "text": "Teruel"
    },
    {
      "text": "Barcelona"
    },
    {
      "text": "Madrid"
    },
    {
      "text": "Valencia"
    }
  ]
}) }}

Con clases de form-group opcionales

Label en línea + Combobox flexible y mensaje de error

Descripción visual

Combobox con label en línea horizontal en negro a la izquierda del campo en pantallas grandes (label arriba en móvil). Contenedor con borde rojo de 2px por el mensaje de error, fondo blanco, y valor seleccionado visible. Mensaje de error en rojo debajo del campo indicando validación fallida. Botón toggle con chevron gris a la derecha del campo.

Error:Esto es un mensaje de error

  • Opción 1
  • Opción 2
  • Opción 3
Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
{{ componentCombobox({
  "id": "combobox-form-group-opcionales",
  "name": "combobox-form-group-opcionales",
  "classes": "w-full",
  "classesContainer": "lg:flex-1",
  "label": {
    "text": "Label en línea:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "items": [
    {
      "text": "Opción 1"
    },
    {
      "text": "Opción 2",
      "selected": true
    },
    {
      "text": "Opción 3"
    }
  ]
}) }}