Dropdown Select — Fluent UI Svelte

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.

This component is available in early access.

The API, features, and behavior of the component are subject to significant changes. We strongly advise against using this component in production environments at this time.

Custom Option Content

Options can render rich content such as a Persona. Provide a text prop for the plain-text selection label.

View Code

<DropdownSelect>
  <DropdownSelectOption value="John Doe" text="John Doe">
    <Persona name="John Doe" primaryText="Software Engineer" presence={{ status: 'available' }} avatar={{ color: 'colorful', idForColor: '' }} />
  </DropdownSelectOption>
  <DropdownSelectOption value="B">Option B</DropdownSelectOption>
  <DropdownSelectOption value="C">Option C</DropdownSelectOption>
</DropdownSelect>

Multiple Selection

Set the multiple prop to allow selecting more than one option at a time.

View Code

<DropdownSelect multiple>
  <DropdownSelectOption value="A">Option A</DropdownSelectOption>
  <DropdownSelectOption value="B">Option B</DropdownSelectOption>
  <DropdownSelectOption value="C">Option C</DropdownSelectOption>
</DropdownSelect>

Component Props

Name	Type	Default	Description
`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`		The DOM reference of the select element.
`wrapperRef` bindable	`HTMLDivElement`		The DOM reference of the wrapper element.
`wrapperProps`	`HTMLAttributes`		The attributes to spread on the wrapper element.
Element Attributes (`select`)

DropdownSelectOption Props

Name	Type	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`	The DOM reference of the option element.
`children`	`Snippet`	The content of the option, used when no `text` is given.
Element Attributes (`option`)