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.

Dropdown

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