Dropdown Select New
import { DropdownSelect } from 'fluentui-svelte';The Dropdown Select is a dropdown built on the native select element. It lets users choose one option, or several with the multiple prop, from a list of DropdownSelectOption children.
Shape
Set shape to rounded (default), square, or circular.
Custom Option Content
Options can render rich content such as a Persona. Provide a text prop for the plain-text selection label.
Multiple Selection
Set the multiple prop to allow selecting more than one option at a time.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Shape of the input surface, including its border and focus indicator. |
value bindable | string | string[] | multiple ? [] : '' | The selected value. An array of values when multiple is set. |
multiple | boolean | Allows more than one option to be selected at a time. | |
placeholder | string | 'Native Select Dropdown' | The text shown while no option is selected. |
hidePlaceholder | boolean | Keeps the placeholder out of the option list once a value is selected. | |
ref bindable | HTMLSelectElement | null | The DOM reference of the select element. | |
wrapperRef bindable | HTMLDivElement | null | The DOM reference of the wrapper element. | |
wrapperAttributes | HTMLAttributes | The attributes to spread on the wrapper element. | |
Element Attributes (select) |
DropdownSelectOption Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | The value reported to the select when the option is picked. | |
text | string | The label of the option. Falls back to the rendered children. | |
disabled | boolean | Disables the user interaction. | |
ref bindable | HTMLElement | null | The DOM reference of the option element. | |
children | Snippet | The content of the option, used when no text is given. | |
Element Attributes (option) |