Switch
A control that allows the user to toggle between checked and not checked.
Helper Text
Usage
import { Switch } from "@lemonsqueezy/wedges";<Switch label="Label" />API Reference
Extends the Radix Switch primitive and includes all of its props.
| Prop | Value | Default |
|---|---|---|
alignLabel | "start" | "end" | "end" |
asChild | boolean | false |
checked | boolean | / |
defaultChecked | boolean | / |
description | ReactNode | / |
disabled | boolean | false |
label | ReactNode | / |
name | string | / |
onCheckedChange | function | / |
required | boolean | false |
tooltip | ReactNode | / |
value | string | "on" |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-state] | "checked" | "unchecked" |
Accessibility
The Switch component supports all accessibility features of the Radix Switch primitive.
Examples
Helper text
Helper text