Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Select menu

Generates a select menu.

Form: single select

Interactive
Selected: -

Form: selecting items with phx-*

Interactive
An example of selecting items using phx-click and phx-value-item.
Selected: -

Item types

Href link Navigate link

Item types - disabled

Link

Menu title

Menu title

Footer

Footer

Footer

Filter

Tabs

Selected items

Labels and icons

Use modifier classes to add space between the icon or label and the text label, for example: class="mr-2".

Message

Message

Blankslate

Menu

This is a blank slate

Use it to provide information when no dynamic content exists.

Loading

Loading...

Borderless

Aligned at end

Dropdown caret

Custom toggle

Backdrop

Transition duration

Open from outside