033
Toggle Group
Actionleft
Customize
Mode
Code
<ToggleGroup value={align} onValueChange={setAlign}>
<Toggle value="left">Left</Toggle>
<Toggle value="center">Center</Toggle>
<Toggle value="right">Right</Toggle>
</ToggleGroup>Install
npx shadcn@latest add https://components.haedong.dev/r/toggle-group.json
Props
Toggle works alone (pressed / defaultPressed / onPressedChange) or inside ToggleGroup with a value; the group lifts the selection as string[].
| Prop | Type | Description |
|---|---|---|
| ToggleGroup.multiple | boolean | Several may be pressed at once. Defaults to false. |
| ToggleGroup.value / defaultValue | string[] | Pressed values (controlled / uncontrolled). |
| ToggleGroup.onValueChange | (value: string[]) => void | Called on every press. |
| Toggle.value | string | Identity inside a group. |