Índice de apartados de esta página
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
}
]
}) }}
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 #
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
}
]
}) }}
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.
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"
}
]
}) }}
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 #
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"
}
]
}) }}
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 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"
}
]
}) }}
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 #
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
}
]
}) }}
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 #
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
}
]
}) }}
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
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
}
]
}) }}
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 #
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
}
]
}) }}
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 #
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
}
]
}) }}
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 -->