Vivid Logo Vivid

Option

Use to display an option list inside the Select, Searchable Select or Combobox components

Text

The text attribute set the text to be displayed in the option list item and in the parent element when selected.

The label attribute can be used to display different text in the parent element when selected.

Secondary Text

The Option can be given extra context using the text-secondary attribute.

To improve readability, avoid long text and multiple lines where possible.

Selected

The selected attribute indicates that the option is selected.

Icons

Icons can be provided using the icon slot. It is displayed at the start of the option, before the text.

The icon(deprecated) attribute displays an icon from the icon library

Connotation

The connotation attribute controls the selected color.

For visual consistency, avoid mixing different connotations within the same control.
All options within a single listbox or select should share the same connotation.

Disabled

The disabled attribute indicates that the option is disabled and can not be selected.

Matched Text

The matched-text attribute highlights a part of text as matching a search query.