# Ejemplo de código de Selector. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

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

# Listbox

Mostrar parámetros

## Parámetros Nunjucks del componente: "Listbox"

```yaml
params:
- name: id
  type: string
  required: true
  description: The id of the listbox.
- name: isMultiselectable
  type: boolean
  required: false
  description: Defaults to false. If true, allows multiple selections.
- name: doesChangeButtonText
  type: boolean
  required: false
  description: Defaults to false. If true, the button text is updated with option selected text.
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
- name: html
  type: string
  required: true
  description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
- name: label
  type: object
  required: true
  description: Label text or HTML by specifying value for either text or html keys.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the element that acts as label.
- name: classesContainer
  type: string
  required: false
  description: Classes to add to the container div of button and tooltip elements.
- name: classesTooltip
  type: string
  required: false
  description: Classes to add to the tooltip content.
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: items
  type: array
  required: true
  description: Array of items objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
  - name: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the button element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the button element.
```

### Por defecto [#](#por-defecto)

Mostrar códigodel ejemplo: Por defecto

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "default",
  "text": "Por defecto",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "html": "Option 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="default-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="default-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="default-label default-button">
    <span class="inline-flex self-center align-middle">Por defecto</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="default" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="default-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item">
        Option 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con estado activo [#](#con-estado-activo)

Simula activar la pseudo-clase de CSS `:active`. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado activo

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-active-state",
  "text": "Activo",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "ds-active",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="with-active-state-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="with-active-state-button" class="c-listbox ds-active" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="with-active-state-label with-active-state-button">
    <span class="inline-flex self-center align-middle">Activo</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="with-active-state" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="with-active-state-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-state-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-state-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-state-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-state-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-state-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con estado hover [#](#con-estado-hover)

Simula activar la pseudo-clase de CSS `:hover`. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado hover

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-hover-state",
  "text": "Hover",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "ds-hover",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="with-hover-state-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="with-hover-state-button" class="c-listbox ds-hover" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="with-hover-state-label with-hover-state-button">
    <span class="inline-flex self-center align-middle">Hover</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="with-hover-state" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="with-hover-state-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-hover-state-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-hover-state-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-hover-state-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-hover-state-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-hover-state-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con estado focus [#](#con-estado-focus)

Simula activar la pseudo-clase de CSS `:focus`. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado focus

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-focus-state",
  "text": "Focus",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "ds-focus",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="with-focus-state-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="with-focus-state-button" class="c-listbox ds-focus" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="with-focus-state-label with-focus-state-button">
    <span class="inline-flex self-center align-middle">Focus</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="with-focus-state" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="with-focus-state-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-focus-state-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-focus-state-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-focus-state-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-focus-state-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-focus-state-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Primario [#](#primario)

Para acciones primarias.

Mostrar códigodel ejemplo: Primario

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "primary",
  "text": "Primario",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "c-listbox--primary",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="primary-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="primary-button" class="c-listbox c-listbox--primary" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="primary-label primary-button">
    <span class="inline-flex self-center align-middle">Primario</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="primary" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="primary-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="primary-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="primary-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="primary-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="primary-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="primary-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Transparente [#](#transparente)

Mostrar códigodel ejemplo: Transparente

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "transparent",
  "text": "Transparente",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "c-listbox--transparent",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="transparent-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="transparent-button" class="c-listbox c-listbox--transparent" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="transparent-label transparent-button">
    <span class="inline-flex self-center align-middle">Transparente</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="transparent" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="transparent-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="transparent-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="transparent-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="transparent-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="transparent-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="transparent-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con estilos de cabecera [#](#con-estilos-de-cabecera)

Mostrar códigodel ejemplo: Con estilos de cabecera

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "header",
  "text": "Header",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--header",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="header-label" class="mb-sm sr-only">
    <p>Esto es un label</p>
  </div>
  <button id="header-button" class="c-listbox c-listbox--header" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="header-label header-button">
    <span class="inline-flex self-center align-middle">Header</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="header" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="header-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="header-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="header-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="header-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="header-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="header-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Peque [#](#peque)

Label solo visible para lectores de pantalla.

Mostrar códigodel ejemplo: Peque

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "small",
  "text": "Peque con texto muy largo",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--sm",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="small-label" class="mb-sm sr-only">
    <p>Esto es un label</p>
  </div>
  <button id="small-button" class="c-listbox c-listbox--sm" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="small-label small-button">
    <span class="inline-flex self-center align-middle">Peque con texto muy largo</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="small" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="small-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Grande [#](#grande)

Label solo visible para lectores de pantalla.

Mostrar códigodel ejemplo: Grande

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "large",
  "text": "Grande",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--lg",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="large-label" class="mb-sm sr-only">
    <p>Esto es un label</p>
  </div>
  <button id="large-button" class="c-listbox c-listbox--lg" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="large-label large-button">
    <span class="inline-flex self-center align-middle">Grande</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="large" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="large-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="large-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="large-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="large-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="large-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="large-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Peque tiene selección [#](#peque-tiene-seleccin)

Un botón con una selección aplicada se muestra con color. Label solo visible para lectores de pantalla.

Mostrar códigodel ejemplo: Peque tiene selección

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "small-has-selection",
  "text": "Peque con texto muy largo",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--has-selection c-listbox--sm",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="small-has-selection-label" class="mb-sm sr-only">
    <p>Esto es un label</p>
  </div>
  <button id="small-has-selection-button" class="c-listbox c-listbox--has-selection c-listbox--sm" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="small-has-selection-label small-has-selection-button">
    <span class="inline-flex self-center align-middle">Peque con texto muy largo</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="small-has-selection" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="small-has-selection-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-has-selection-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-has-selection-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-has-selection-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-has-selection-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="small-has-selection-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Deshabilitado [#](#deshabilitado)

Mostrar códigodel ejemplo: Deshabilitado

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "disabled",
  "text": "Deshabilitado",
  "label": {
    "text": "Esto es un label"
  },
  "disabled": true,
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="disabled-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="disabled-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="disabled-label disabled-button" disabled="disabled" aria-disabled="true">
    <span class="inline-flex self-center align-middle">Deshabilitado</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="disabled" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="disabled-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="disabled-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="disabled-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="disabled-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="disabled-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="disabled-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con clases de css aplicadas al container [#](#con-clases-de-css-aplicadas-al-container)

Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.

Mostrar códigodel ejemplo: Con clases de css aplicadas al container

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "classes-applied-to-container-element",
  "text": "Clases en container",
  "label": {
    "text": "Esto es un label"
  },
  "classesContainer": "inline-block p-base bg-primary-light",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative inline-block p-base bg-primary-light">
  <div id="classes-applied-to-container-element-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="classes-applied-to-container-element-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="classes-applied-to-container-element-label classes-applied-to-container-element-button">
    <span class="inline-flex self-center align-middle">Clases en container</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="classes-applied-to-container-element" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="classes-applied-to-container-element-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-container-element-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-container-element-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-container-element-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-container-element-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-container-element-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Clases aplicadas al contenido del tooltip [#](#clases-aplicadas-al-contenido-del-tooltip)

El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.

Mostrar códigodel ejemplo: Clases aplicadas al contenido del tooltip

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "classes-applied-to-tooltip-content",
  "text": "Clases al contenido del tooltip",
  "label": {
    "text": "Esto es un label"
  },
  "classesTooltip": "max-h-24 overflow-y-auto",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="classes-applied-to-tooltip-content-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="classes-applied-to-tooltip-content-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="classes-applied-to-tooltip-content-label classes-applied-to-tooltip-content-button">
    <span class="inline-flex self-center align-middle">Clases al contenido del tooltip</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white max-h-24 overflow-y-auto" data-module="c-listbox-tooltip">
    <ul id="classes-applied-to-tooltip-content" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="classes-applied-to-tooltip-content-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-tooltip-content-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-tooltip-content-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-tooltip-content-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-tooltip-content-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-tooltip-content-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Clases aplicadas a varios elementos [#](#clases-aplicadas-a-varios-elementos)

En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.

Mostrar códigodel ejemplo: Clases aplicadas a varios elementos

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "classes-applied-to-various-elements",
  "text": "Listbox de anchura completa",
  "label": {
    "text": "Esto es un label",
    "classes": "font-semibold text-sm"
  },
  "classes": "w-full justify-between",
  "classesTooltip": "w-max max-h-64 overflow-y-auto",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="classes-applied-to-various-elements-label" class="mb-sm font-semibold text-sm">
    <p>Esto es un label</p>
  </div>
  <button id="classes-applied-to-various-elements-button" class="c-listbox w-full justify-between" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="classes-applied-to-various-elements-label classes-applied-to-various-elements-button">
    <span class="inline-flex self-center align-middle">Listbox de anchura completa</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white w-max max-h-64 overflow-y-auto" data-module="c-listbox-tooltip">
    <ul id="classes-applied-to-various-elements" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="classes-applied-to-various-elements-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-various-elements-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-various-elements-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-various-elements-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-various-elements-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="classes-applied-to-various-elements-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con item activo [#](#con-item-activo)

Podemos seleccionar inicialmente un item si le añadimos el parámetro `'active': true`. También puedes usar con javascript la función global `activateItemListBox(elementMenu, activeItemId)` para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe `activateItemListBox('listbox', 'with-active-item-listbox-item-2')` para seleccionar el segundo item de este ejemplo.

Mostrar códigodel ejemplo: Con item activo

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-active-item",
  "text": "con item activo",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4 activa",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "listbox"
  }
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative" id="listbox">
  <div id="with-active-item-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="with-active-item-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="with-active-item-label with-active-item-button">
    <span class="inline-flex self-center align-middle"> Opción 4 activa</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="with-active-item" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="with-active-item-label" aria-activedescendant="with-active-item-listbox-item-4">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-item-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-item-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-item-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="true" id="with-active-item-listbox-item-4">
        Opción 4 activa
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-item-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Permite selecciones múltiples [#](#permite-selecciones-mltiples)

Usa el parámetro `'isMultiselectable': true`. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global `activateItemListBox(elementMenu, activeItemId)` para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe `activateItemListBox('listbox-multiple', ['is-multiselectable-listbox-item-2', 'is-multiselectable-listbox-item-3'])` para seleccionar el segundo y el tercer item de este ejemplo.

Mostrar códigodel ejemplo: Permite selecciones múltiples

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "is-multiselectable",
  "isMultiselectable": true,
  "text": "Selecciones múltiples",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "listbox-multiple"
  }
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative" id="listbox-multiple">
  <div id="is-multiselectable-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="is-multiselectable-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="is-multiselectable-label is-multiselectable-button">
    <span class="inline-flex self-center align-middle">Selecciones múltiples</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="is-multiselectable" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="is-multiselectable-label" aria-multiselectable="true">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="is-multiselectable-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="is-multiselectable-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="is-multiselectable-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="is-multiselectable-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="is-multiselectable-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Cambia el texto del botón [#](#cambia-el-texto-del-botn)

Usa el parámetro `'doesChangeButtonText': true` para hacer que el texto del botón se actualice al seleccionar un item. Si `'doesChangeButtonText': true`, entonces no tiene efecto

Mostrar códigodel ejemplo: Cambia el texto del botón

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "does-change-button-text",
  "text": "Opción 1",
  "label": {
    "text": "Esto es un label"
  },
  "doesChangeButtonText": true,
  "items": [
    {
      "href": "#",
      "html": "Option 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="does-change-button-text-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="does-change-button-text-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" data-change="change" aria-labelledby="does-change-button-text-label does-change-button-text-button">
    <span class="inline-flex self-center align-middle">Opción 1</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="does-change-button-text" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="does-change-button-text-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="does-change-button-text-listbox-item">
        Option 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="does-change-button-text-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="does-change-button-text-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="does-change-button-text-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="does-change-button-text-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con iconos en items [#](#con-iconos-en-items)

Mostrar códigodel ejemplo: Con iconos en items

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "icons",
  "text": "Iconos en items",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "html": "Opción 1 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg>"
    },
    {
      "href": "#",
      "html": "Opción 2 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg>"
    },
    {
      "href": "#",
      "html": "Opción 3 <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline ml-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg>"
    }
  ]
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="icons-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="icons-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="icons-label icons-button">
    <span class="inline-flex self-center align-middle">Iconos en items</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="icons" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="icons-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="icons-listbox-item">
        Opción 1 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img">
          <g id="new-file--empty-common-file-content">
            <path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path>
          </g>
        </svg>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="icons-listbox-item-2">
        Opción 2 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img">
          <g id="link-chain--create-hyperlink-link-make-unlink-connection-chain">
            <path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path>
          </g>
        </svg>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="icons-listbox-item-3">
        Opción 3 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img">
          <g id="clipboard-text--edition-form-task-checklist-edit-clipboard">
            <path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path>
          </g>
        </svg>
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Con párrafos en items [#](#con-prrafos-en-items)

Mostrar códigodel ejemplo: Con párrafos en items

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "paragraphs",
  "text": "Párrafos en items",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "html": "Actuaciones previas/preparatorias <p class='text-xs font-normal pointer-events-none'>Consulta previa, actos preparatorios de expediente, bases reguladoras...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Inicio de la tramitación <p class='text-xs font-normal pointer-events-none'>Solicitud, subsanación, declaración responsable, aprobación expediente...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Otros trámites en fase de inicio <p class='text-xs font-normal pointer-events-none'>Documentos que no se puedan asociar a ningún otro tramite en fase de inicio</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Participación pública <p class='text-xs font-normal pointer-events-none'>Información pública, alegaciones, audiencia...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Informes sectoriales <p class='text-xs font-normal pointer-events-none'>Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Valoración/Prueba/Licitación <p class='text-xs font-normal pointer-events-none'>Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...</p>",
      "classes": "flex-wrap"
    }
  ],
  "classesTooltip": "w-xs!"
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative">
  <div id="paragraphs-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="paragraphs-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="paragraphs-label paragraphs-button">
    <span class="inline-flex self-center align-middle">Párrafos en items</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white w-xs!" data-module="c-listbox-tooltip">
    <ul id="paragraphs" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="paragraphs-label">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black flex-wrap" aria-selected="false" id="paragraphs-listbox-item">
        Actuaciones previas/preparatorias <p class="text-xs font-normal pointer-events-none">Consulta previa, actos preparatorios de expediente, bases reguladoras...</p>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black flex-wrap" aria-selected="false" id="paragraphs-listbox-item-2">
        Inicio de la tramitación <p class="text-xs font-normal pointer-events-none">Solicitud, subsanación, declaración responsable, aprobación expediente...</p>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black flex-wrap" aria-selected="false" id="paragraphs-listbox-item-3">
        Otros trámites en fase de inicio <p class="text-xs font-normal pointer-events-none">Documentos que no se puedan asociar a ningún otro tramite en fase de inicio</p>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black flex-wrap" aria-selected="false" id="paragraphs-listbox-item-4">
        Participación pública <p class="text-xs font-normal pointer-events-none">Información pública, alegaciones, audiencia...</p>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black flex-wrap" aria-selected="false" id="paragraphs-listbox-item-5">
        Informes sectoriales <p class="text-xs font-normal pointer-events-none">Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...</p>
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black flex-wrap" aria-selected="false" id="paragraphs-listbox-item-6">
        Valoración/Prueba/Licitación <p class="text-xs font-normal pointer-events-none">Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...</p>
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```

### Menú abierto o cerrado con javascript [#](#men-abierto-o-cerrado-con-javascript)

Podemos abrir o cerrar un menú usando con javascript la función global `toggleMenuListbox(elementMenu, open)` para abrir o cerrar un menú, usando su id. El parámetro `open` admite `true` o `false`, si le pasamos `true` abrirá el menú, y si le pasamos `false` cerrará el menú. Ej: Abre la consola del navegador y escribe `toggleMenuListbox('listbox-javascript', true)` para abrir el menú de este ejemplo.

Mostrar códigodel ejemplo: Menú abierto o cerrado con javascript

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-active-unactive-item",
  "text": "con item activo",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5",
      "active": true
    }
  ],
  "attributes": {
    "id": "listbox-javascript"
  }
}) }}
```

##### HTML

```html
<!-- listbox -->
<div data-module="c-listbox" class="relative" id="listbox-javascript">
  <div id="with-active-unactive-item-label" class="mb-sm">
    <p>Esto es un label</p>
  </div>
  <button id="with-active-unactive-item-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="with-active-unactive-item-label with-active-unactive-item-button">
    <span class="inline-flex self-center align-middle"> Opción 5</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-listbox__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
    <ul id="with-active-unactive-item" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-hidden" aria-labelledby="with-active-unactive-item-label" aria-activedescendant="with-active-unactive-item-listbox-item-5">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-unactive-item-listbox-item">
        Opción 1
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-unactive-item-listbox-item-2">
        Opción 2
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-unactive-item-listbox-item-3">
        Opción 3
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="false" id="with-active-unactive-item-listbox-item-4">
        Opción 4
      </li>
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" aria-selected="true" id="with-active-unactive-item-listbox-item-5">
        Opción 5
      </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
```