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

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 #

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 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 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 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 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 #

Esto es un label

Esto es una pista.

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

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>Error: 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 select-3-error" 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 label como encabezado #

Esto es un label

Mostrar código

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

HTML

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <h1 class="block ">
    <label class="block" for="select-4">Esto es un label</label>
  </h1>
  <!-- /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-4" name="select-4">
    <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 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 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: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": "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
    }
  ]
}) }}

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>Error: 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-describedby="select-6-error" 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 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 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 -->

Componentes Índice de páginas

Selector

Select

Parámetros del componente

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 label como encabezado #

Esto es un label

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