Toggle Group
Grouped toggles with single or multiple selection.
<ToggleGroup type="single" defaultValue="center" roughness={1.5}>
<ToggleGroupItem value="left">Left</ToggleGroupItem>
<ToggleGroupItem value="center">Center</ToggleGroupItem>
</ToggleGroup>CLI install
npx doodleui-react add toggle-group
Usage
import { ToggleGroup, ToggleGroupItem } from "doodleui-react";
<ToggleGroup type="single" defaultValue="a">\n <ToggleGroupItem value="a">A</ToggleGroupItem>\n <ToggleGroupItem value="b">B</ToggleGroupItem>\n</ToggleGroup>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Selection mode for the group. |
| size | "sm" | "md" | "lg" | "md" | Passed to each ToggleGroupItem. |
| animate | boolean | true | Draw-in and pressed-state morph for items. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |