Components / Combobox
Combobox
Autocomplete combobox with search, multi-select, loading state, and keyboard navigation. Shares input-field styling with cg-input (size, rounded, error, success states).
forms v0.8.0
Playground
Examples
Basic
<cg-combobox placeholder="Select a framework"></cg-combobox>Multi-select with chips
<cg-combobox multiple clearable placeholder="Pick frameworks"></cg-combobox>Error state
<cg-combobox error placeholder="Required"></cg-combobox>Large size
<cg-combobox size="lg" placeholder="Larger field"></cg-combobox>Import
import { CgCombobox } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-combobox';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
options | ComboOption[] | — | Option list |
value | string | string[] | — | Selected value(s) |
multiple | boolean | false | Multi-select mode |
placeholder | string | — | Placeholder text |
searchable | boolean | true | Enable search filter |
clearable | boolean | false | Show clear button |
disabled | boolean | false | Disabled state |
loading | boolean | false | Loading state |
error | boolean | false | Error state — red border + error focus glow |
success | boolean | false | Success state — success border + success focus glow |
size | "md" | "lg" | "md" | Field height — matches cg-input sizes |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius — matches cg-input rounded variants |
Events
| Event | Detail | Description |
|---|---|---|
cg-combobox-change | {value} | Selection changed |