Moon liveview storybook Moon Liveview Storybook

Dropdown

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub
Attribute Type Documentation Default Value
Required id * :string

Unique identifier.
value :any

The selected value.
label :string

Label text.
""
disabled :boolean

Set disabled state.
false
size :string

Size.
"md"
position :string

Position of the dropdown.
"bottom"
content_class :string

CSS Content classes for custom styles.
""
initial_state :string

Initial state of the dropdown.
"hidden"
rest :global

Additional attributes.
is_error :boolean

Set valid/non-valid state (use this instead of @is_error)
false
error :boolean

[DEPRECATED] Use @error instead.
false
required :boolean

Set required state.
false
trigger :slot

Trigger element

 
<:trigger :let={toggle_dropdown}>
<.dropdown_select
placeholder="Select a person"
toggle_dropdown={toggle_dropdown}
data-testid="dropdown-select-trigger-select"
/>
</:trigger>
<:options>
<.dropdown_option
  :for={person <- [
"Wade Cooper",
"Arlene Mccoy",
"Devon Webb",
"Tom Cook",
"Tanya Fox",
"Hellen Schmidt"
]}
  phx-click="click_on_dropdown_trigger"
  phx-value-person={person}
  data-testid="dropdown-select-trigger-option"
>
  <.menu_item data-testid="dropdown-select-trigger-menu-item">
    {person}
  </.menu_item>
</.dropdown_option>
</:options>
hint :slot
Show slot attributes Hide slot attributes
class :string
options :slot

Dropdown options.

 
<:trigger :let={toggle_dropdown}>
<.dropdown_select
placeholder="Select a person"
toggle_dropdown={toggle_dropdown}
data-testid="dropdown-select-trigger-select"
/>
</:trigger>
<:options>
<.dropdown_option
  :for={person <- [
"Wade Cooper",
"Arlene Mccoy",
"Devon Webb",
"Tom Cook",
"Tanya Fox",
"Hellen Schmidt"
]}
  phx-click="click_on_dropdown_trigger"
  phx-value-person={person}
  data-testid="dropdown-select-trigger-option"
>
  <.menu_item data-testid="dropdown-select-trigger-menu-item">
    {person}
  </.menu_item>
</.dropdown_option>
</:options>