Noora (0.32.0)

Dropdown

Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the dropdown component
label :string

Main text displayed in the dropdown trigger
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
icon :slot

Icon to be rendered in the dropdown trigger
inner_block :slot

Content to be rendered inside the dropdown menu

 
<.dropdown_item value="1" label="Option 1" />
<.dropdown_item value="2" label="Option 2" />
<.dropdown_item value="3" label="Option 3" />
<.dropdown_item value="4" label="Option 4" />
<.dropdown_item value="5" label="Option 5" />
<.dropdown_item value="6" label="Option 6" />
<.dropdown_item value="7" label="Option 7" />
<.dropdown_item value="8" label="Option 8" />
<.dropdown_item value="9" label="Option 9" />
<.dropdown_item value="10" label="Option 10" />
<.dropdown_item value="11" label="Option 11" />
<.dropdown_item value="12" label="Option 12" />
<.dropdown_item value="13" label="Option 13" />
<.dropdown_item value="14" label="Option 14" />
<.dropdown_item value="15" label="Option 15" />
<.dropdown_item value="16" label="Option 16" />
<.dropdown_item value="17" label="Option 17" />
<.dropdown_item value="18" label="Option 18" />
<.dropdown_item value="19" label="Option 19" />
<.dropdown_item value="20" label="Option 20" />