Noora (0.81.4)

Dropdown

Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the dropdown component
label :string

Main text displayed in the dropdown trigger
size :string

The size of the dropdown trigger
"large"
secondary_text :string

Secondary text displayed to the left of the main label
icon_only :boolean

Whether the dropdown trigger is icon-only
false
hint :string

Hint text for the dropdown
disabled :boolean

Whether the dropdown is disabled
on_open_change :string

Event handler for when the dropdown opens
on_highlight_change :string

Event handler for when the highlighted option changes
on_select :string

Event handler for when an option is selected
on_escape_key_down :string

Event handler for when the escape key is pressed
on_pointer_down_outside :string

Event handler for when the pointer is pressed outside the dropdown
on_focus_outside :string

Function called when the focus is moved outside the component
on_interact_outside :string

Function called when an interaction happens outside the component
close_on_select :boolean

Whether to close the dropdown when an item is selected
true
rest :global

Additional HTML attributes
icon :slot

Icon to be rendered in the dropdown trigger
search :slot

Search input to be rendered at the top of the dropdown menu (outside scroll area)
inner_block :slot

Content to be rendered inside the dropdown menu

 
<.dropdown_item value="monday" label="Monday" checked={true} />
<.dropdown_item value="tuesday" label="Tuesday" checked={true} />
<.dropdown_item value="wednesday" label="Wednesday" checked={false} />
<.dropdown_item value="thursday" label="Thursday" checked={false} />
<.dropdown_item value="friday" label="Friday" checked={true} />
<.dropdown_item value="saturday" label="Saturday" checked={false} />
<.dropdown_item value="sunday" label="Sunday" checked={false} />