Dropdown
In progress
Aria
RTL
Dropdowns is a custom select component that allows users to make single or multiple selections.
An option that's been selected can represent a corresponding value in forms or be used to filter/sort content.

Anatomy
<Dropdown> <Dropdown.Options> <Dropdown.Option>...</Dropdown.Option> <Dropdown.Option>...</Dropdown.Option> <Dropdown.Option>...</Dropdown.Option> </Dropdown.Options> <Dropdown.Trigger>...</Dropdown.Trigger> </Dropdown>
Default
Trigger elements
Option layouts
Positions
Sizes
Datepicker
Responsive dropdown
Dropdown props
Component for rendering dropdown info, mostly lists
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | Yes | - | The id of the live component (required by LiveView for stateful components). |
value | any | No | - | Value(s) of the options to be marked as selected |
on_trigger | event | No | - | Event fired when trigger is clicked |
on_close | event | No | - | Event fired to close Dropdown.BottomOptions |
is_open | boolean | No | - | Put true here if you want dropdown to be shown by default |
class | css_class | No | - | Addictional classes to be added to a dropdown |
testid | string | No | - | Data-testid attribute for HTML tag |
hook | string | No | - | Attribute phx-hook. Used for dependant components |
trigger | slot | Yes | - | Slot for triggering the open/closing state |
default | slot | No | - | Content to be showable |
backdrop | slot | No | - | Backdrop of Dropdown as BottomSheet on small screens, see Dropdown.Backdrop |
Dropdown.Options props
Options list for the Dropdown component
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for div |
value | any | No | - | Value of the selected option(s) |
on_change | event | No | - | On option click event, in most cases got from context |
is_open | boolean | No | - | If the optionlist is open, got from context |
size | sm | md | lg | No | "md" | Size of the options |
class | css_class | No | - | Additional CSS classes for the div |
position | top-start | top | top-end | bottom-start | bottom | bottom-end | right-start | right | right-end | left-start | left | left-end | No | - | Specifies the position of the dropdown |
titles | list | No | [] | List of the options. Used when no |
option_module | atom | No | Moon.Design.Dropdown.Option | - |
testid | string | No | - | Data-testid attribute for div |
option | slot | No | - | - |
default | slot | No | - | - |
Dropdown.Trigger props
Name | Type | Required | Default | Description |
---|---|---|---|---|
title | string | No | - | Title to be shown when no defaul slot given |
is_open | boolean | No | - | If the trigger is open. Should be taken from context |
on_click | event | No | - | Event that fired when trigger is clicked |
testid | string | No | - | Data-testid attribute for HTML tag |
default | slot | No | - | Inner content of the component |
Dropdown.Option props
Single oprion for the dropdown component. Renders as a button
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for buttons |
testid | string | No | - | Data-testid attribute for button |
title | string | No | - | Title to be shown when no default slot is given |
class | css_class | No | - | Additional CSS classes for the button tag |
disabled | boolean | No | - | If the button is disabled |
on_click | event | No | - | On click event, in most cases got from context |
value | any | No | - | Value of the option, in most cases got from context |
is_selected | boolean | No | - | If the option is selected, in most cases got from context |
size | sm | md | lg | No | - | Text size & paddings for the option. Is set by Dropdown.Options in most cases |
default | slot | No | - | Inner content of the option |
Dropdown.BottomOptions props
Options list for the Dropdown component
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for div |
value | any | No | - | Value of the selected option(s) |
on_change | event | No | - | On option click event, in most cases got from context |
on_close | event | No | - | Click event, in most cases got from context |
is_open | boolean | No | - | If the optionlist is open, got from context |
size | sm | md | lg | No | "md" | Size of the options |
class | css_class | No | - | Additional CSS classes for the div |
titles | list | No | [] | List of the options. Used when no |
option_module | atom | No | Moon.Design.Dropdown.Option | - |
testid | string | No | - | Data-testid attribute for div |
option | slot | No | - | - |
default | slot | No | - | - |
Dropdown.Backdrop props
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for html tag |
testid | string | No | - | Data-testid attribute for html tag |
class | css_class | No | - | Additional CSS classes for the html tag |
is_open | boolean | No | - | If the optionlist is open, got from context |