Toggle Group
FREESegmented control with a sliding highlight, plus outline and ghost toolbars; single or multiple choice.
Installation
Terminal
npx @bloxa/cli add toggle-group
# or: npx shadcn@latest add @bloxa/toggle-groupPackages installed automatically: motion, radix-ui
Examples
Segmented control
The highlight glides to the new choice.
Selected: week
Toolbar
API reference
Every component also accepts the props of the element it renders.
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Single or multiple choice. |
| variant | "segmented" | "outline" | "ghost" | "segmented" | Look. |
| size | "sm" | "md" | "lg" | "md" | Size. |
| fullWidth | boolean | false | Fill the width. |
Toggle
| Prop | Type | Default | Description |
|---|---|---|---|
| pressed / onPressedChange | boolean / (pressed) => void | — | On state. |
| variant | "ghost" | "outline" | "ghost" | Look. |