Option

An implementation of an option.

The <FluentOption> component is meant to only be used within a components such as <FluentSelect>, <FluentCombobox> or <FluentListbox>.

<FluentOption> wraps the <fluent-option> element, a web component implementation of a listbox option leveraging the Fluent UI design system.

Examples

Default

Example
Text content is the value when the value attribute is absent.
Even when the value attribute and text are both present, this text should be displayed.
Download: 

States

Example

Disabled

This option is disabled.

Selected

This option is selected by default.
Download: 

Icons

Example

With icons

This option has an icon in its start and end slots. This option has an icon in its start slot. This option has an icon in its end slot.
Download: 

Documentation

FluentOption<TOption> Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
Gets or sets the content to be rendered inside the component.
Disabledbool
False
Gets or sets a value indicating whether the element is disabled.
Selectedbool
False
Gets or sets a value indicating whether the element is selected.
Valuestring?
Gets or sets the value of this option.

EventCallbacks

Name
Type
Description
OnSelectEventCallback<string>
Called whenever the selection changed.
SelectedChangedEventCallback<bool>
Called whenever the selection changed.

Methods

Name
Parameters
Type
Description
OnClickHandlerAsyncTask
An error has occurred. This application may no longer respond until reloaded. Reload 🗙