Components / Toggle Group
Toggle Group
Group of cg-toggle elements with single or multiple selection mode. Handles selection state, keyboard navigation, and propagates size/variant to children.
actions v0.7.0
Playground
Examples
Alignment
<cg-toggle-group type="single" value="left" variant="outline"><cg-toggle value="left">Left</cg-toggle><cg-toggle value="center">Center</cg-toggle><cg-toggle value="right">Right</cg-toggle></cg-toggle-group>Multi-select
<cg-toggle-group type="multiple" variant="outline"><cg-toggle value="bold"><strong>B</strong></cg-toggle><cg-toggle value="italic"><em>I</em></cg-toggle><cg-toggle value="underline"><u>U</u></cg-toggle></cg-toggle-group>Import
import { CgToggleGroup } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-toggle-group';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Selection mode |
value | string | string[] | "" | Selected value(s) |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
size | "sm" | "md" | "lg" | "md" | Size propagated to children |
variant | "ghost" | "outline" | "solid" | "ghost" | Variant propagated to children |
disabled | boolean | false | Disable all toggles |
Events
| Event | Detail | Description |
|---|---|---|
cg-toggle-group-change | {value: string | string[]} | Selection changed |