Select

Mostrar parámetros

Parámetros Nunjucks del componente: "Select"

              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 #

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Deshabilitado #

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

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.

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Con optgroup #

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

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.

Esto es un label

Esto es una pista.

Error:Esto es un mensaje de error

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Con anchura completa #

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Con clases de form-group opcionales #

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

Label en línea:

Error:Esto es un mensaje de error

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Transparente #

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Peque #

Esto es un label

Mostrar código

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

HTML

<!-- 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-sm 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 -->

Páginas

Todos los componentes

Select

Parámetros Nunjucks del componente: "Select"

Por defecto #

Contenido

Nunjucks macro

HTML

Deshabilitado #

Contenido

Nunjucks macro

HTML

Placeholder #

Contenido

Nunjucks macro

HTML

Con optgroup #

Contenido

Nunjucks macro

HTML

Con pista y mensaje de error #

Contenido

Nunjucks macro

HTML

Con anchura completa #

Contenido

Nunjucks macro

HTML

Con clases de form-group opcionales #

Contenido

Nunjucks macro

HTML

Transparente #

Contenido

Nunjucks macro

HTML

Peque #

Contenido

Nunjucks macro

HTML