Toggle

Form Controls

Stable

Toggle button for on/off states. Built on Radix Toggle with default, outline, and secondary variants.

Quick Import

import { Toggle } from "@cohere-ai/waypoint-ui/toggle";

Live Preview

Loading Toggle...

Name	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'secondary'`	`'default'`	Visual style
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Size
`pressed`	`boolean`	-	Controlled pressed state
`defaultPressed`	`boolean`	-	Default pressed state
`onPressedChange`	`function`	-	Callback on press state change

Toggle button for bold formatting

1 import { Toggle } from '@cohere-ai/waypoint-ui/toggle';
2  
3 <Toggle aria-label="Toggle bold" variant="outline">
4   <BoldIcon />
5 </Toggle>

These components work well together or serve similar purposes.

Group of toggle buttons for single or multiple selection. Each item can override variant and size individually.

Toggle switch for binary on/off states. Built on Radix Switch. Supports preventFormControl to avoid parent form interactions.

Interactive button component with 6 variants, 5 sizes, and asChild support for polymorphic rendering.

If you've encountered a bug or have feedback about the Toggle component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Your feedback helps us improve our documentation.

1	import { Toggle } from '@cohere-ai/waypoint-ui/toggle';
2
3	<Toggle aria-label="Toggle bold" variant="outline">
4	<BoldIcon />
5	</Toggle>