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
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
- Scoped
Select menu
Generates a select menu.
-
Documentation
- select_menu
Form: single select
Selected: -
Form: selecting items with phx-*
An example of selecting items using
phx-click and phx-value-item.
Selected: -
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
-
On this page
- Top of page
- Documentation
-
Stories
- Form: single select
- Form: selecting items with phx-*
- Item types
- Item types - disabled
- Menu title
- Footer
- Filter
- Tabs
- Selected items
- Labels and icons
- Message
- Blankslate
- Loading
- Borderless
- Aligned at end
- Dropdown caret
- Custom toggle
- Backdrop
- Transition duration
- Open from outside
- Top of page