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
.