DESY

Sistema de Diseño del Gobierno de Aragón.

Selector

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

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: Id for each select box.
- name: name
  type: string
  required: true
  description: Name property for the select.
- name: items
  type: array
  required: true
  description: Array of option items for the select.
  params:
  - name: value
    type: string
    required: false
    description: Value for the option item.
  - name: text
    type: string
    required: true
    description: Text for the option item.
  - name: optgroup
    type: boolean
    required: false
    description: If true, there will be an optgroup with items.
  - name: optgroup.label
    type: string
    required: false
    description: Label for the optgroup.
  - name: optgroup.disabled
    type: boolean
    required: false
    description: If true, the optgroup will be disabled.
  - name: optgroup.items
    type: array
    required: false
    description: Provide subitems for the optgroup.
  - name: selected
    type: boolean
    required: false
    description: Sets the option as the selected.
  - name: disabled
    type: boolean
    required: false
    description: Sets the option item as disabled.
  - name: hidden
    type: boolean
    required: false
    description: Sets the option item as hidden.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the option.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: false
  description: Label text or HTML by specifying value for either text or html keys.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: disabled
  type: boolean
  required: false
  description: If true, select will be disabled.
- name: classes
  type: string
  required: false
  description: Classes to add to the select.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the select.
              
            

Por defecto

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

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.

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

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

Esto es una pista.

Error: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": "Error: 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 label como encabezado

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro

{% from "components/select/_macro.select.njk" import componentSelect %}

{{ componentSelect({
  "id": "select-4",
  "name": "select-4",
  "label": {
    "text": "Esto es un label",
    "isPageHeading": true
  },
  "items": [
    {
      "value": 1,
      "text": "Opción 1"
    },
    {
      "value": 2,
      "text": "Opción 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Opción 3",
      "disabled": true
    }
  ]
}) }}

Con anchura completa

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

Error: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": "Error: 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

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

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
    }
  ]
}) }}