Components / Select
Select
Dropdown select with optional search filtering, keyboard navigation (arrows/enter/escape), size variants, rounded options, and validation states.
forms v0.1.0
Playground
Examples
Basic
<cg-select placeholder="Choose a model" style="max-width: 300px;"></cg-select>Sizes
<cg-stack gap="sm" style="max-width: 300px;"><cg-select size="sm" placeholder="Small"></cg-select><cg-select size="md" placeholder="Medium (default)"></cg-select><cg-select size="lg" placeholder="Large"></cg-select></cg-stack>Searchable
<cg-select searchable placeholder="Search countries..." style="max-width: 300px;"></cg-select>Error state
<cg-select error placeholder="Required field" style="max-width: 300px;"></cg-select>Import
import { CgSelect } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-select';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | — | Array of {value, label, disabled?} objects |
value | string | "" | Selected value |
label | string | — | Label text above the trigger |
placeholder | string | "Select..." | Placeholder text |
name | string | "" | Form field name |
size | "sm" | "md" | "lg" | "md" | Select trigger size |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius override |
disabled | boolean | false | Disable interaction |
error | boolean | false | Error state — red border and focus ring |
success | boolean | false | Success state — green border and focus ring |
searchable | boolean | false | Enable search filtering within the dropdown |
Events
| Event | Detail | Description |
|---|---|---|
cg-change | {value: string, label: string} | When a selection is made |