Toggle Group
A set of two-state buttons that can be toggled on or off.
Installation
›pnpm dlx shadcn@latest add @evolphin/toggle-group
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>Type Definitions
interface ToggleGroupProps {
/** The type of toggle group */
type: "single" | "multiple"; /** The visual style of the toggle group */
?: "default" | "outline";
/** The size of the toggle group */
?: "default" | "sm" | "lg";
}Examples
Default
Outline
Single Select
Large
API Reference
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
type | `"single" \ | "multiple"` | "single" |
variant | `"default" \ | "outline"` | "default" |
size | `"default" \ | "sm" \ | "lg"` |
value | `string \ | string[]` | - |
onValueChange | `(value: string \ | string[]) => void` | - |
disabled | boolean | false | Whether the toggle group is disabled. |
className | string | - | Additional CSS classes |
ToggleGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The value of the item. |
disabled | boolean | false | Whether the item is disabled. |
aria-label | string | - | Accessibility label for the item. |
className | string | - | Additional CSS classes |