Skip to content

ComboboxItem

Source: client/lib/theme/vueda-tailwind/controls/index.js

A single result row inside a ComboboxGroup.root. The data-highlighted state (set by the picker on keyboard or pointer focus) paints --accent / --accent-foreground, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip. data-disabled halves opacity and drops pointer events; rounded-sm keeps the row a chit inside the group's slab. The committed-value data-state=checked tint that SelectItem.root carries is not applied here because Combobox commits by closing the popover; the trailing ComboboxItemIndicator.root marks the selection instead.

Vue component: ComboboxItem

SlotDefault classesDescription
root3 classesA single result row inside a ComboboxGroup.root. The data-highlighted state (set by the picker on keyboard or pointer focus) paints --accent / --accent-foreground, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip. data-disabled halves opacity and drops pointer events; rounded-sm keeps the row a chit inside the group's slab. The committed-value data-state=checked tint that SelectItem.root carries is not applied here because Combobox commits by closing the popover; the trailing ComboboxItemIndicator.root marks the selection instead.

root

A single result row inside a ComboboxGroup.root. The data-highlighted state (set by the picker on keyboard or pointer focus) paints --accent / --accent-foreground, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip. data-disabled halves opacity and drops pointer events; rounded-sm keeps the row a chit inside the group's slab. The committed-value data-state=checked tint that SelectItem.root carries is not applied here because Combobox commits by closing the popover; the trailing ComboboxItemIndicator.root marks the selection instead.

Default classes:

text
data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground active:bg-accent-active active:text-accent-foreground
[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none
data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4

Source: client/lib/theme/vueda-tailwind/controls/ComboboxItem.theme.js:17

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2