Option List

Updated:

Use internally by Select and Dropdown for rendering searchable option lists.

Properties

Learn more about properties.

customSearch
custom-search

Indicates a custom search is being implemented for the option list.

disabled

Disables the option list.

label

Determines the label that is applied to the option list for accessibility purposes.

multiple

Enables the multi-select ability for the option list.

Only applicable when options are provided.

noSelect
no-select

Disables the logic that handles selecting and focusing an option in the option list.

selectedOptions
selected-options

A list of the selected options on the element.

showSelected
show-selected

Applies focus to the selected option.

type

Translates to the role of the option list

Events

The q2-option-list element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

change

Emitted when an option is selected or deselected.

When the multi-select is enabled, the value property will be undefined and the selectedOptions property will contain the selected option values.

Event Detail Type signature

{ value: string; values: IOptionValue[]; }

popoverState

Emitted to indicate the intended state of the popover.

Event Detail Type signature

{ open: boolean; action: "select" | "open" | "close"; }

ready

Emitted when the component has finished rendering.

Event Detail Type signature

undefined

tctChange

Emitted when an option is selected or deselected.

When the multi-select is enabled, the value property will be undefined and the selectedOptions property will contain the selected option values.

Event Detail Type signature

{ value: string; values: IOptionValue[]; }

Methods

The q2-option-list element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

getContents

Type signature

getContents() => Promise<(HTMLQ2OptgroupElement | ValidOptionElements)[]>

getOptions

Type signature

getOptions() => Promise<ValidOptionElements[]>

handleExternalKeydown

Type signature

handleExternalKeydown(event: KeyboardEvent) => Promise<void>

setActiveElement

Type signature

setActiveElement(index: number) => Promise<void>

setDefaultActiveElement

Type signature

setDefaultActiveElement() => Promise<void>

Dependencies

This component uses other components in the Tecton library, including:

    Dependents

    Other components in the Tecton library use this component, including:

    • q2-action-sheet
    • q2-dropdown
    • q2-pill
    • q2-select
    • q2-tag

    Accessibility

    Accessibility Report

    Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

    CSS Variables

    The following CSS variables are available to override the default theme styles of the q2-option-list component.