ToggleGroup
Form ControlsStable
Group of toggle buttons for single or multiple selection. Each item can override variant and size individually.
Quick Import
import { ToggleGroup } from "@cohere-ai/waypoint-ui/toggle-group";Live Preview
Loading ToggleGroup...
Props
| Name | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | - | Selection mode |
variant | Toggle variant | - | Applied to all items |
size | Toggle size | - | Applied to all items |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
spacing | number | 0 | Gap between items (CSS variable) |
Examples
Text Alignment Toggle Group
Single-select toggle group for text alignment
1 import { ToggleGroup, ToggleGroupItem } from '@cohere-ai/waypoint-ui/toggle-group'; 2 3 <ToggleGroup type="single" variant="outline"> 4 <ToggleGroupItem value="left" aria-label="Left align"> 5 <AlignLeftIcon /> 6 </ToggleGroupItem> 7 <ToggleGroupItem value="center" aria-label="Center align"> 8 <AlignCenterIcon /> 9 </ToggleGroupItem> 10 <ToggleGroupItem value="right" aria-label="Right align"> 11 <AlignRightIcon /> 12 </ToggleGroupItem> 13 </ToggleGroup>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the ToggleGroup component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.