desy-html

Select

Parámetros Nunjucks del componente: "Select". Versión: 14.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: id\n  type: string\n  required: true\n  description: Id for each select box.\n- name: name\n  type: string\n  required: true\n  description: Name property for the select.\n- name: items\n  type: array\n  required: true\n  description: Array of option items for the select.\n  params:\n  - name: value\n    type: string\n    required: false\n    description: Value for the option item.\n  - name: text\n    type: string\n    required: true\n    description: Text for the option item.\n  - name: optgroup\n    type: boolean\n    required: false\n    description: If true, there will be an optgroup with items.\n  - name: optgroup.label\n    type: string\n    required: false\n    description: Label for the optgroup.\n  - name: optgroup.disabled\n    type: boolean\n    required: false\n    description: If true, the optgroup will be disabled.\n  - name: optgroup.items\n    type: array\n    required: false\n    description: Provide subitems for the optgroup.\n  - name: selected\n    type: boolean\n    required: false\n    description: Sets the option as the selected.\n  - name: disabled\n    type: boolean\n    required: false\n    description: Sets the option item as disabled.\n  - name: hidden\n    type: boolean\n    required: false\n    description: Sets the option item as hidden.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the option.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: label\n  type: object\n  required: false\n  description: Label text or HTML by specifying value for either text or html keys.\n  isComponent: true\n- name: hint\n  type: object\n  required: false\n  description: Options for the hint component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  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`.\n  isComponent: true\n- name: formGroup\n  type: object\n  required: false\n  description: Options for the form-group wrapper\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, select will be disabled.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the select.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the select.","length":2718}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-1">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-1" name="select-1">
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3" disabled>Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-2">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-2" name="select-2" disabled>
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3" disabled>Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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
    }
  ]
}) }}
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.

Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-placeholder">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-placeholder" name="select-placeholder">
    <option value="" selected disabled hidden>Choose an option</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Placeholder", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
    }
  ]
}) }}
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

Ejemplo: "Con optgroup", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-optgroup">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-optgroup" name="select-optgroup">
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <optgroup label="Optgroup label A">
      <option value="1">Optgroup subopción A1</option>
      <option value="2" selected>Optgroup subopción A2</option>
      <option value="3">Optgroup subopción A3</option>
    </optgroup>
    <option value="3">Opción 3</option>
    <option value="4">Opción 4</option>
    <optgroup label="Optgroup label B">
      <option value="1">Optgroup subopción B1</option>
      <option value="2">Optgroup subopción B2</option>
      <option value="3">Optgroup subopción B3</option>
    </optgroup>
    <option value="5">Opción 5</option>
    <option value="6">Opción 6</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Con optgroup", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
    }
  ]
}) }}
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.

Ejemplo: "Con pista y mensaje de error", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="select-3">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="select-3-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="select-3-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--error border-alert-base ring-2 ring-alert-base " id="select-3" name="select-3" aria-describedby="select-3-hint" aria-errorMessage="select-3-error" aria-invalid="true">
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Con pista y mensaje de error", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
    }
  ]
}) }}

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

Ejemplo: "Con anchura completa", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-5">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="select-5" name="select-5">
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3" disabled>Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Con anchura completa", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-center lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="select-6">Label en línea:</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="select-6-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:flex-1 c-select--error border-alert-base ring-2 ring-alert-base " id="select-6" name="select-6" aria-errorMessage="select-6-error" aria-invalid="true">
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3" disabled>Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Transparente", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-7">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--transparent" id="select-7" name="select-7">
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3" disabled>Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Transparente", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-8">Esto es un label</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm" id="select-8" name="select-8">
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3" disabled>Opción 3</option>
  </select>
</div>
<!-- /select -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Select", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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