Searchable Select

Searchable Select allows users to select one or multiple items from a list of options. It provides a search input field to filter the options.

import { registerSearchableSelect } from '@vonage/vivid';

registerSearchableSelect('your-prefix');

For a single select, you can control the selected value by setting the value attribute.

For multiple select, you can control the selected values by setting the values property.

Add the fixed-dropdown attribute to change the dropdown to use a fixed position strategy. This is useful for cases in which the dropdown is obstructed by other elements.

The open attribute allows the Searchable Select to be opened programmatically.

You can access the current search text through the searchText property and listen for changes through the search-text-change event.

You can control option filtering by setting optionFilter to a custom function. For example, always returning true will disable filtering by always showing all options.

Holds the available options as Option elements.

You can use the Option's tag-icon slot to display an icon next to the selected option's tag.

Hidden Options

Setting hidden on an Option will hide it from the dropdown while still allowing it to be a selected value.

Set the icon slot to show an icon at the start of the input. If set, the icon(deprecated) attribute is ignored.

Use the meta slot to show meta information at the end of the input field.

The helper-text slot allows you to use rich content as the helper text.

The contextual-help slot allows you to add the Contextual Help component next to the label.

You can specify width on the Searchable Select to control the width of the component. The default width is 300px.

The dropdown has min-width of its content.

Use --searchable-select-height to set the max-height of the dropdown. The default value is 408px.