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 en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto seleccionado negro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo 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 en texto negro pequeño arriba. Campo rectangular con fondo gris muy claro, borde gris tenue de 1px, padding medio, texto seleccionado gris atenuado alineado a la izquierda, icono de flecha gris claro apuntando hacia abajo a la derecha. Label descriptivo 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 en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto placeholder en gris claro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo 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 de ayuda en gris debajo del label, mensaje de error en rojo debajo del campo. Campo 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. Valor 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 valor 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, valor seleccionado visible, sin borde visible o con borde muy sutil, fondo transparente o blanco. Altura estándar del componente con flecha dropdown negra. Texto descriptivo 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, valor seleccionado, borde gris de 1px, fondo blanco. Altura reducida del campo select con padding mínimo. Texto descriptivo 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
    }
  ]
}) }}