Components / Radio Group
Radio Group
Manages a group of <cg-radio> elements with WAI-ARIA keyboard navigation (arrows, home, end), vertical/horizontal orientation, and group-level disable.
forms v0.5.0
Playground
Examples
Vertical (default)
<cg-radio-group name="plan" value="pro" label="Choose plan"><cg-radio label="Free" value="free"></cg-radio><cg-radio label="Pro" value="pro"></cg-radio><cg-radio label="Enterprise" value="enterprise"></cg-radio></cg-radio-group>Tick variant
<cg-radio-group name="tick" value="b" label="Pick one"><cg-radio variant="tick" label="Alpha" value="a"></cg-radio><cg-radio variant="tick" label="Beta" value="b"></cg-radio><cg-radio variant="tick" label="Gamma" value="c"></cg-radio></cg-radio-group>Horizontal
<cg-radio-group name="size" value="md" label="Size" orientation="horizontal"><cg-radio label="Small" value="sm"></cg-radio><cg-radio label="Medium" value="md"></cg-radio><cg-radio label="Large" value="lg"></cg-radio></cg-radio-group>Disabled
<cg-radio-group name="locked" value="a" label="Locked" disabled><cg-radio label="Option A" value="a"></cg-radio><cg-radio label="Option B" value="b"></cg-radio></cg-radio-group>Import
import { CgRadioGroup } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-radio-group';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | "" | Shared name for all child radios |
value | string | "" | Currently selected radio value |
label | string | "" | Accessible group label (aria-label) |
disabled | boolean | false | Disable all child radios |
orientation | "vertical" | "horizontal" | "vertical" | Layout direction of child radios |
Events
| Event | Detail | Description |
|---|---|---|
cg-change | {value: string} | When the selected value changes |