Dropdown

Dropdown are form controls to select an option, or options, from a set of options. It renders a native <select> element. When a user taps the select, a native dialog appears with all of the options.

<Dropdown name="demo" bind:selectedValue="{demoValue}">
  <DropdownItem value="1">Option 1</DropdownItem>
  <DropdownItem value="2">Option 2</DropdownItem>
  <DropdownItem value="3">Option 3</DropdownItem>
</Dropdown>

Properties

Property Description Type Default
selectedValue Bind the select value attribute of the HTML input of type select that is rendered by the component string or undefined undefined
name The name attribute of the select. string
disabled HTML input disabled field. boolean false
testId Add a data-tid attribute to the DOM, useful for test purpose. string or undefined undefined

Slots

Slot name Description
start An element that can be displayed over the select on its left side. e.g. useful to display icons.

If a slot start is provided but, its element is hided through CSS, the start padding can be adjusted with a CSS variable --select-padding-start.

Showcase