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 label items, for example: class="mx-1".

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