Listbox

Selectable option list with single/multi-select, keyboard navigation, type-ahead, and group headers.

forms v0.6.0

Playground

Check right (default)

<cg-listbox label="Choose framework" style="max-width:300px;"></cg-listbox>

Check left

<cg-listbox checkPosition="left" label="Choose size" style="max-width:300px;"></cg-listbox>

Multi-select

<cg-listbox multiple label="Select toppings" style="max-width:300px;"></cg-listbox>

With groups

<cg-listbox label="Choose item" style="max-width:300px;"></cg-listbox>

import { CgListbox } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-listbox';

Per-component imports ship only that component (~8 kB gzip).

Prop	Type	Default	Description
`options`	ListboxOption[]	—	Options — {value, label, description?, disabled?, group?}
`value`	string \| string[]	""	Selected value(s)
`multiple`	boolean	false	Allow multi-select
`checkPosition`	"left" \| "right"	"right"	Checkmark position — left or right of the label
`label`	string	—	Accessible label

Event	Detail	Description
`cg-change`	{value: string \| string[]}	When selection changes