Toggle Group
@/components/kamod-ui/toggle-group
Installation
Import ToggleGroup and ToggleGroupItem from `@/components/kamod-ui/toggle-group`.
pnpm add @kamod-ch/uiUsage
Use `type`, `variant`, `size`, `spacing`, and `orientation` to build compact, modern segmented controls.
import { ToggleGroup } from "@/components/kamod-ui/toggle-group";<ToggleGroup />Single Selection
Allow one active option at a time with a segmented control look.
Sizes
Use a compact or prominent size depending on your context.
Spacing
Tune the density between items with spacing presets.
Vertical
Set orientation to vertical for stacked controls.
Disabled
Disable a full group or single items to reflect unavailable actions.
Custom Font Weight
Use custom item classes to build segmented font-weight selectors.
Icon Only
Build dense, icon-only controls for editor-like toolbars.
Multiple Selection
Allow many active options in one modern toolbar group.
Pill Style
Use `variant="pill"` for a modern, chip-like segmented control.
Controlled
Control selection with external state using `value` and `onValueChange`.
Current value: list
API Reference
Props, slots and variants for this component.
Toggle Group
Toggle Group component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| type | "single" | "multiple" | "single" |
| value / defaultValue | string | string[] | undefined |
| onValueChange | (value: string | string[]) => void | undefined |
| variant | "default" | "outline" | "pill" | "default" |
| size | "sm" | "default" | "lg" | "default" |
| spacing | "none" | "sm" | "default" | "lg" | "sm" |
| orientation | "horizontal" | "vertical" | "horizontal" |
| disabled | boolean | false |
Accessibility Notes
Use clear labels for each option and ensure selected state is perceivable with more than color alone.