Dropdown

import { Dropdown } from 'fluentui-svelte';

The Dropdown lets users select one or more options from a list of DropdownOption children. Options can render rich content, such as a Persona, and the current selection is exposed through a bindable value.

Usage

<script>
	import { Dropdown, DropdownOption } from 'fluentui-svelte';
</script>

<Dropdown aria-label="Choose an option">
	<DropdownOption value="A" text="Option A">Option A</DropdownOption>
	<DropdownOption value="B" text="Option B">Option B</DropdownOption>
</Dropdown>

Shape

Set shape to rounded (default), square, or circular.

View Code

<script>
  import { Dropdown, DropdownOption } from 'fluentui-svelte';
</script>

<Dropdown shape="rounded" aria-label="rounded" value="svelte">
  <DropdownOption value="svelte" text="Svelte">Svelte</DropdownOption>
</Dropdown>
<Dropdown shape="square" aria-label="square" value="svelte">
  <DropdownOption value="svelte" text="Svelte">Svelte</DropdownOption>
</Dropdown>
<Dropdown shape="circular" aria-label="circular" value="svelte">
  <DropdownOption value="svelte" text="Svelte">Svelte</DropdownOption>
</Dropdown>

Custom Option Content

Options can render any content, such as a Persona. Pass a text prop so the closed dropdown can still display the selection.

View Code

<Dropdown aria-label="Choose an option">
  <DropdownOption value="John Doe" text="John Doe">
    <Persona name="John Doe" primaryText="Software Engineer" presence={{ status: 'available' }} avatarProps={{ color: 'colorful', idForColor: '' }} />
  </DropdownOption>
  <DropdownOption value="B" text="Option B">Option B</DropdownOption>
  <DropdownOption value="C" text="Option C">Option C</DropdownOption>
</Dropdown>

Multiple Selection

Set the multiple prop to allow selecting more than one option at a time while pressing Ctrl (or Cmd on Mac).

View Code

<Dropdown multiple aria-label="Choose options">
  <DropdownOption value="A" text="Option A">Option A</DropdownOption>
  <DropdownOption value="B" text="Option B">Option B</DropdownOption>
  <DropdownOption value="C" text="Option C">Option C</DropdownOption>
</Dropdown>

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

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`	`'Select an option'`	The text shown by the trigger while no option is selected.
`disabled`	`boolean`		Disables the user interaction.
`name`	`string` \| `null`		The name the value is submitted under. Without one, the form leaves the value out, as with any field.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		The DOM reference of the wrapper element.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`ref` bindable	`HTMLSelectElement` \| `null`		The DOM reference of the native select that holds the value. The other attributes of the dropdown are applied to it.
`buttonRef` bindable	`HTMLButtonElement` \| `null`		The DOM reference of the button that opens the dropdown.
`buttonAttributes`	`HTMLButtonAttributes`		The attributes to spread on the button that opens the dropdown.
`flyoutRef` bindable	`HTMLDivElement` \| `null`		The DOM reference of the flyout element.
`flyoutProps`	`FlyoutProps`		The props to spread on the flyout.
`flyoutMaxHeight`	`string`		The maximum height of the flyout, as a CSS length.
`listboxRef` bindable	`HTMLUListElement` \| `null`		The DOM reference of the listbox element.
`listboxProps`	`ListViewProps`		The props to spread on the listbox rendered inside the flyout.
`children`	`Snippet`		The `DropdownOption` elements of the list.
`DropdownMultipleValue` \| `DropdownSingleValue`
`NativeFieldAttributes<HTMLSelectAttributes>`

DropdownOption Props

Name	Type	Default	Description
`text`	`string`		The text shown by the dropdown once the option is selected. Falls back to the rendered children, which the server cannot read: pass it when rendering on the server.
`ListViewItemProps<'li'>`

Components

Usage

Shape

Custom Option Content

Multiple Selection

Form Control Attributes

Component Props

DropdownOption Props