Listbox examples

default

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

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

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

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

Primary

A button for primary actions

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

Transparent

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

Header

Label text goes here

Small

Small button. Label only shown for screen readers.

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

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

Disabled

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

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

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

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

with active item

Label text goes here

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

Allow multiple selections

isMultiselectable = true

Label text goes here

  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

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

With icons in items

Label text goes here

  • Option 1
  • Option 2
  • Option 3

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