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