Toggle Group
Group related toggle buttons with shared selection behavior.
Preview
Import
import { ToggleGroup, ToggleGroupItem } from "@sigil-ui/components";Usage
<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>Sub-components
This component includes the following parts:
<ToggleGroupItem>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Selection mode. |
size | "sm" | "md" | "lg" | md | Toggle size applied to all items. |
value | string | string[] | — | — |
defaultValue | string | string[] | — | — |
onValueChange | (value: string | string[]) => void | — | — |
disabled | boolean | — | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-border-style | Border style |
--s-border | Border |
--s-text-secondary | Text secondary |
--s-duration-fast | Duration fast |
--s-surface-elevated | Surface elevated |
--s-ring | Ring |
--s-primary | Primary |
--s-surface | Surface |
--s-text | Text |