Components / Segmented Control
Segmented Control
iOS-style pill selector with animated sliding indicator. Single-value selection for display modes, time ranges, view switchers.
actions v0.7.0
Playground
Examples
Time range
<cg-segmented-control value="week"></cg-segmented-control>Full width
<cg-segmented-control value="list" full style="width:320px;"></cg-segmented-control>Import
import { CgSegmentedControl } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-segmented-control';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
options | {label, value}[] | — | Segment options |
value | string | "" | Selected value |
size | "sm" | "md" | "lg" | "md" | Size |
full | boolean | false | Full width |
disabled | boolean | false | Disabled state |
Events
| Event | Detail | Description |
|---|---|---|
cg-segmented-change | {value: string} | Selection changed |