Skip to main content
Version: 1.x

fast-option

An implementation of an option. To avoid namespace collisions with the Option() constructor, the component class is ListboxOption, and our implementation is named fast-option.

The <fast-option> component will only provide internals related to form association when used within a form-associated component such as fast-select or fast-combobox. It will not provide these capabilities when used only with a fast-listbox.

Setup

import {
provideFASTDesignSystem,
fastOption
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastOption()
);

Usage

See fast-select, fast-combobox, or fast-listbox.

Create your own design

import {
ListboxOption,
listboxOptionTemplate as template,
} from "@microsoft/fast-foundation";
import { optionStyles as styles } from "./my-listbox-option.styles";

export const myOption = ListboxOption.compose({
baseName: "option",
template,
styles,
});

API

class: ListboxOption

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
checkedpublicboolean or undefinedThe checked state is used when the parent listbox is in multiple selection mode. To avoid accessibility conflicts, the checked state should not be present in single selection mode.
contentpublicNode[]The default slotted content.
defaultSelectedpublicbooleanfalseThe defaultSelected state of the option.
disabledpublicbooleanThe disabled state of the option.
selectedAttributepublicbooleanThe selected attribute value. This sets the initial selected value.
selectedpublicbooleanThe checked state of the control.
dirtyValuepublicbooleanfalseTrack whether the value has been changed from the initial value
initialValueprotectedstringThe initial value of the option. This value sets the `value` property only when the `value` property has not been explicitly set.
labelpublic
textpublicstring
valuepublicstring
formpublicHTMLFormElement or null
proxynew Option( `${this.textContent}`, this.initialValue, this.defaultSelected, this.selected )
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
checkedChangedpublicUpdates the ariaChecked property when the checked property changes.prev: boolean or unknown, next: booleanvoid
defaultSelectedChangedprotectedvoid
disabledChangedprotectedprev: boolean, next: booleanvoid
selectedAttributeChangedprotectedvoid
selectedChangedprotectedvoid
initialValueChangedpublicprevious: string, next: stringvoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
disabled
selectedselectedAttribute
valueinitialValue

CSS Parts

NameDescription
contentWraps the listbox option content

Slots

NameDescription
startContent which can be provided before the listbox option content
endContent which can be provided after the listbox option content
The default slot for listbox option content

class: DelegatesARIAListboxOption

Fields

NamePrivacyTypeDefaultDescriptionInherited From
ariaCheckedpublic"true" or "false" or string or nullSee https://www.w3.org/TR/wai-aria-1.2/#option for more information.
ariaPosInSetpublicstring or nullSee https://www.w3.org/TR/wai-aria-1.2/#option for more information.
ariaSelectedpublic"true" or "false" or string or nullSee https://www.w3.org/TR/wai-aria-1.2/#option for more information.
ariaSetSizepublicstring or nullSee https://www.w3.org/TR/wai-aria-1.2/#option for more information.

Functions

NameDescriptionParametersReturn
isListboxOptionDetermines if the element is a (ListboxOption:class)el: Element, elementel is ListboxOption

Additional resources