DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Selector

Formularios

Es un elemento de formulario que permite seleccionar una opción de entre un listado de varias. Cuando está plegado, muestra la opción actualmente seleccionada y cuando está expandido muestra una lista desplegable de opciones predefinidas.

Select

Por defecto

Descripción visual

Dropdown select con label "por defecto" en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto "Opción 2" negro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo "Esta es un label" en gris claro debajo del título.

Mostrar códigodel ejemplo: Por defecto

Contenido

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

Deshabilitado

Descripción visual

Dropdown select con label "deshabilitado" en texto negro pequeño arriba. Campo rectangular con fondo gris muy claro (#f5f5f5), borde gris tenue de 1px, padding medio, texto "Opción 2" gris atenuado alineado a la izquierda, icono de flecha gris claro apuntando hacia abajo a la derecha. Label descriptivo "Esta es un label" en gris claro debajo del título, apariencia visualmente inactiva.

Mostrar códigodel ejemplo: Deshabilitado

Contenido

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

Placeholder

Usa una combinación de los parámetros 'disabled': true, 'selected': true y 'hidden': true para la primera opción y actúará como si fuera un placeholder visual.

Descripción visual

Dropdown select con label "placeholder" en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto "Choose an option" gris claro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo "Esta es un label" en gris claro debajo del título.

Mostrar códigodel ejemplo: Placeholder

Contenido

Nunjucks macro
{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-placeholder",
  "name": "select-placeholder",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "value": "",
      "text": "Choose an option",
      "disabled": true,
      "selected": true,
      "hidden": true
    },
    {
      "value": 1,
      "text": "Opción 1"
    },
    {
      "value": 2,
      "text": "Opción 2"
    },
    {
      "value": 3,
      "text": "Opción 3"
    }
  ]
}) }}

Con optgroup

Descripción visual

Dropdown select con borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo en el extremo derecho del campo. Texto seleccionado en negro sobre fondo blanco.

Mostrar códigodel ejemplo: Con optgroup

Contenido

Nunjucks macro
{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-optgroup",
  "name": "select-optgroup",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "value": 1,
      "text": "Opción 1"
    },
    {
      "value": 2,
      "text": "Opción 2"
    },
    {
      "optgroup": {
        "label": "Optgroup label A",
        "items": [
          {
            "value": 1,
            "text": "Optgroup subopción A1"
          },
          {
            "value": 2,
            "text": "Optgroup subopción A2",
            "selected": true
          },
          {
            "value": 3,
            "text": "Optgroup subopción A3"
          }
        ]
      }
    },
    {
      "value": 3,
      "text": "Opción 3"
    },
    {
      "value": 4,
      "text": "Opción 4"
    },
    {
      "optgroup": {
        "label": "Optgroup label B",
        "items": [
          {
            "value": 1,
            "text": "Optgroup subopción B1"
          },
          {
            "value": 2,
            "text": "Optgroup subopción B2"
          },
          {
            "value": 3,
            "text": "Optgroup subopción B3"
          }
        ]
      }
    },
    {
      "value": 5,
      "text": "Opción 5"
    },
    {
      "value": 6,
      "text": "Opción 6"
    }
  ]
}) }}

Con pista y 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

Dropdown select con borde rojo de 2px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba, texto gris debajo del label, texto rojo debajo del campo. Botón seleccionado con borde negro, fondo blanco, texto negro, icono X rojo a la derecha.

Esto es una pista.

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con pista y mensaje de error

Contenido

Nunjucks macro
{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-3",
  "name": "select-3",
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error"
  },
  "items": [
    {
      "value": 1,
      "text": "Opción 1"
    },
    {
      "value": 2,
      "text": "Opción 2"
    },
    {
      "value": 3,
      "text": "Opción 3"
    }
  ]
}) }}

Con anchura completa

Descripción visual

Dropdown select ocupando el 100% del ancho del contenedor, borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo alineado al extremo derecho. Texto seleccionado en negro sobre fondo blanco.

Mostrar códigodel ejemplo: Con anchura completa

Contenido

Nunjucks macro
{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-5",
  "name": "select-5",
  "classes": "w-full",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "value": 1,
      "text": "Opción 1"
    },
    {
      "value": 2,
      "text": "Opción 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Opción 3",
      "disabled": true
    }
  ]
}) }}

Con clases de form-group opcionales

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

Descripción visual

Select desplegable con label en negro, contenedor con borde rojo de 2px, fondo blanco, y texto "Opción 2" seleccionado. Mensaje de error en rojo debajo del campo indicando validación fallida. Altura estándar del select con flecha dropdown negra a la derecha.

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-6",
  "name": "select-6",
  "classes": "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": [
    {
      "value": 1,
      "text": "Opción 1"
    },
    {
      "value": 2,
      "text": "Opción 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Opción 3",
      "disabled": true
    }
  ]
}) }}

Transparente

Descripción visual

Select desplegable con label en negro, texto "Opción 2" visible, sin borde visible o con borde muy sutil, fondo transparente o blanco. Altura estándar del componente con flecha dropdown negra. Texto "Esto es un label" aparece entre el encabezado y el select.

Mostrar códigodel ejemplo: Transparente

Contenido

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

Peque

Descripción visual

Select desplegable compacto con label en negro arriba, texto "Opción 2" seleccionado, borde gris de 1px, fondo blanco. Altura reducida del campo select con padding mínimo. Texto "Esto es un label" entre el encabezado y el componente, flecha dropdown negra a la derecha.

Mostrar códigodel ejemplo: Peque

Contenido

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