Listbox examples

Show params

Params

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.

default

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "default",
  "text": "Default",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "href": "#",
      "html": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="default-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Default</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" 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-none focus:shadow-outline-focus focus:text-black" id="default-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="default-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="default-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="default-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

with active state

Simulate triggering the :active CSS pseudo-class, not available in the production build.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-active-state",
  "text": "Active",
  "label": {
    "text": "Label text goes here"
  },
  "classes": "ds-active",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="with-active-state-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Active</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="with-active-state-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-none focus:shadow-outline-focus focus:text-black" id="with-active-state-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-active-state-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-active-state-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-active-state-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

with hover state

Simulate triggering the :hover CSS pseudo-class, not available in the production build.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-hover-state",
  "text": "Hovered",
  "label": {
    "text": "Label text goes here"
  },
  "classes": "ds-hover",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="with-hover-state-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Hovered</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="with-hover-state-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-none focus:shadow-outline-focus focus:text-black" id="with-hover-state-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-hover-state-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-hover-state-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-hover-state-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

with focus state

Simulate triggering the :focus CSS pseudo-class, not available in the production build.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-focus-state",
  "text": "Focussed",
  "label": {
    "text": "Label text goes here"
  },
  "classes": "ds-focus",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="with-focus-state-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Focussed</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="with-focus-state-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-none focus:shadow-outline-focus focus:text-black" id="with-focus-state-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-focus-state-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-focus-state-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-focus-state-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Primary

A button for primary actions

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "primary",
  "text": "Primary button",
  "label": {
    "text": "Label text goes here"
  },
  "classes": "c-listbox--primary",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="primary-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Primary button</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="primary-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-none focus:shadow-outline-focus focus:text-black" id="primary-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="primary-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="primary-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="primary-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Transparent

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "transparent",
  "text": "Transparent",
  "label": {
    "text": "Label text goes here"
  },
  "classes": "c-listbox--transparent",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="transparent-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Transparent</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="transparent-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-none focus:shadow-outline-focus focus:text-black" id="transparent-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="transparent-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="transparent-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="transparent-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Header

Label text goes here

Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "header",
  "text": "Header",
  "label": {
    "text": "Label text goes here",
    "classes": "sr-only"
  },
  "classes": "c-listbox--header",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="header-label" class="mb-sm sr-only">
        <p>Label text goes here</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 max-w-xs align-middle truncate">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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="header-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-none focus:shadow-outline-focus focus:text-black" id="header-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="header-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="header-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="header-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Small

Small button. Label only shown for screen readers.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "small",
  "text": "Small button with a very long text",
  "label": {
    "text": "Label text goes here",
    "classes": "sr-only"
  },
  "classes": "c-listbox--sm",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="small-label" class="mb-sm sr-only">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Small button with a very long text</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="small-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-none focus:shadow-outline-focus focus:text-black" id="small-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="small-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="small-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="small-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Small has selection

A button with selection applied. Label only shown for screen readers.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "small-has-selection",
  "text": "Small button with a very long text",
  "label": {
    "text": "Label text goes here",
    "classes": "sr-only"
  },
  "classes": "c-listbox--has-selection c-listbox--sm",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="small-has-selection-label" class="mb-sm sr-only">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Small button with a very long text</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="small-has-selection-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-none focus:shadow-outline-focus focus:text-black" id="small-has-selection-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="small-has-selection-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="small-has-selection-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="small-has-selection-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Disabled

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "disabled",
  "text": "Disabled button",
  "label": {
    "text": "Label text goes here"
  },
  "disabled": true,
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="disabled-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Disabled button</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="disabled-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-none focus:shadow-outline-focus focus:text-black" id="disabled-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="disabled-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="disabled-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="disabled-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Classes applied to container element

Both button and tooltip elements are wrapped in an outer container div

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "classes-applied-to-container-element",
  "text": "Classes in container",
  "label": {
    "text": "Label text goes here"
  },
  "classesContainer": "inline-block p-base bg-warning-light",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class="inline-block p-base bg-warning-light">
    <div id="classes-applied-to-container-element-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Classes in 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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-container-element-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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-container-element-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-container-element-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-container-element-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-container-element-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Classes applied to tooltip content

Tooltip content can have additional classes applied

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "classes-applied-to-tooltip-content",
  "text": "Classes in tooltip content",
  "label": {
    "text": "Label text goes here"
  },
  "classesTooltip": "max-h-24 overflow-y-auto",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="classes-applied-to-tooltip-content-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Classes in tooltip content</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-tooltip-content-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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-tooltip-content-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-tooltip-content-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-tooltip-content-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-tooltip-content-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Classes applied to various elements

The content width generates the tooltip width in this example

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "classes-applied-to-various-elements",
  "text": "Dropdown full width",
  "label": {
    "text": "Label text goes here",
    "classes": "font-semibold text-sm"
  },
  "classes": "w-full justify-between",
  "classesTooltip": "w-max max-h-64 overflow-y-auto",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="classes-applied-to-various-elements-label" class="mb-sm font-semibold text-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Dropdown full width</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-various-elements-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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-various-elements-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-various-elements-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-various-elements-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="classes-applied-to-various-elements-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

with active item

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Active Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "with-active-item",
  "text": "With active item",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Active Option 4",
      "active": true
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="with-active-item-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate"> Active Option 4</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="with-active-item-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-none focus:shadow-outline-focus focus:text-black" id="with-active-item-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="with-active-item-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" aria-selected="true" id="with-active-item-listbox-item-4">
    Active Option 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-none focus:shadow-outline-focus focus:text-black" id="with-active-item-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Allow multiple selections

isMultiselectable = true

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "is-multiselectable",
  "isMultiselectable": true,
  "text": "Is multiselectable",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="is-multiselectable-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Is multiselectable</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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="is-multiselectable-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-none focus:shadow-outline-focus focus:text-black" id="is-multiselectable-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="is-multiselectable-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="is-multiselectable-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="is-multiselectable-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

Does change button text

doesChangeButtonText=true, Updates the button text with the selected option text. If isMultiselectable, then has no effect.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "does-change-button-text",
  "text": "Option 1",
  "label": {
    "text": "Label text goes here"
  },
  "doesChangeButtonText": true,
  "items": [
    {
      "href": "#",
      "html": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="does-change-button-text-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Option 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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" 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-none focus:shadow-outline-focus focus:text-black" id="does-change-button-text-listbox-item-2">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="does-change-button-text-listbox-item-3">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="does-change-button-text-listbox-item-4">
    Option 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-none focus:shadow-outline-focus focus:text-black" id="does-change-button-text-listbox-item-5">
    Option 5
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

With icons in items

Label text goes here

  • Option 1
  • Option 2
  • Option 3
Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "icons",
  "text": "Icons in items",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "href": "#",
      "html": "Option 1 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block align-baseline ml-sm\" aria-label=\"Archivo\" focusable=\"false\" role=\"img\"><path d=\"M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z\" fill=\"currentColor\"/><path d=\"M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z\" fill=\"currentColor\"/></svg>"
    },
    {
      "href": "#",
      "html": "Option 2 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block align-baseline ml-sm\" aria-label=\"Link\" focusable=\"false\" role=\"img\"><path d=\"M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z\" fill=\"currentColor\"/><path d=\"M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z\" fill=\"currentColor\"/><path d=\"M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z\" fill=\"currentColor\"/></svg>"
    },
    {
      "href": "#",
      "html": "Option 3 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block align-baseline ml-sm\" aria-label=\"Solicitud\" focusable=\"false\" role=\"img\"><path d=\"M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z\" fill=\"currentColor\"/><path d=\"M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z\" fill=\"currentColor\"/><path d=\"M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z\" fill=\"currentColor\"/></svg>"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="icons-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Icons in 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 -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-none" 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-none focus:shadow-outline-focus focus:text-black" id="icons-listbox-item">
    Option 1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></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-none focus:shadow-outline-focus focus:text-black" id="icons-listbox-item-2">
    Option 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></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-none focus:shadow-outline-focus focus:text-black" id="icons-listbox-item-3">
    Option 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg>
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->

With paragraphs in items

Label text goes here

  • Actuaciones previas/preparatorias

    Consulta previa, actos preparatorios de expediente, bases reguladoras...

  • Inicio de la tramitación

    Solicitud, subsanación, declaración responsable, aprobación expediente...

  • Otros trámites en fase de inicio

    Documentos que no se puedan asociar a ningún otro tramite en fase de inicio

  • Participación pública

    Información pública, alegaciones, audiencia...

  • Informes sectoriales

    Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...

  • Valoración/Prueba/Licitación

    Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...

Show code

Macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
  "id": "paragraphs",
  "text": "Paragraphs in items",
  "label": {
    "text": "Label text goes here"
  },
  "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"
    }
  ]
})  }}

Markup



<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="paragraphs-label" class="mb-sm">
        <p>Label text goes here</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 max-w-xs align-middle truncate">Paragraphs in 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 -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip" >
    <ul id="paragraphs" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" 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-none focus:shadow-outline-focus focus:text-black flex-wrap" 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-none focus:shadow-outline-focus focus:text-black flex-wrap" 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-none focus:shadow-outline-focus focus:text-black flex-wrap" 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-none focus:shadow-outline-focus focus:text-black flex-wrap" 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-none focus:shadow-outline-focus focus:text-black flex-wrap" 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-none focus:shadow-outline-focus focus:text-black flex-wrap" 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 -->