Switch
Form ControlsStable
v1.0.0Toggle switch for binary on/off states. Built on Radix Switch. Supports preventFormControl to avoid parent form interactions.
Quick Import
import { Switch } from "@cohere-ai/waypoint-ui/switch";Live Preview
Loading Switch...
Props
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled state |
defaultChecked | boolean | - | Default state |
onCheckedChange | function | - | Callback on toggle |
disabled | boolean | false | Disables the switch |
preventFormControl | boolean | false | Stops click from propagating to parent form |
Examples
Switch with Label
Toggle switch for enabling notifications
1 import { Switch } from '@cohere-ai/waypoint-ui/switch'; 2 import { Label } from '@cohere-ai/waypoint-ui/label'; 3 4 <div className="flex items-center gap-2"> 5 <Switch id="notifications" /> 6 <Label htmlFor="notifications">Enable notifications</Label> 7 </div>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Switch 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.