Components / inputs

Combobox Option

One option in a Combobox list. Highlighted marks the option under the keyboard or pointer, Selected shows a check and brand tint, Disabled cannot be chosen.

import { ComboboxOption } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { ComboboxOption } from '@basiiik/ui';

<ComboboxOption>Lisbon</ComboboxOption>

• Highlighted, Selected and Disabled are props; the Combobox sets them from its keyboard and pointer state.
• Storybook: Inputs/Combobox.

Props

States. Highlighted, Selected and Disabled are props; the Combobox sets them from its keyboard and pointer state.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Only inside a Combobox

Do not use it when

• Actions or commands (use Menu Item)

Rules for agents

• Combobox renders its own options from the options data; use ComboboxOption only to build a custom combobox list
• Keep focus in the input; mark the highlighted option with highlighted and point at it with aria-activedescendant
• selected is the chosen option; highlighted is the one under the keyboard or pointer

Avoid

• Moving DOM focus onto an option
• Actions or commands as options (use Menu Item)

Keyboard

• Not focusable itself: the Combobox input keeps focus and arrow keys move the highlight

Accessibility

• aria-selected on the chosen option
• aria-disabled on unavailable options
• Each option has a unique id so the input can point at it with aria-activedescendant

Colour tokens it reads

Related

• Combobox
• Menu Item

inputs 4 Figma variants Try it in the live demo