Switch Group
A visual group of Switch controls that allow the user to toggle between checked unchecked states.
Helper text
Usage
import { SwitchGroup } from "@lemonsqueezy/wedges";<SwitchGroup label="Label">
<SwitchGroup.Item label="Option 1" />
<SwitchGroup.Item label="Option 2" />
</SwitchGroup>API Reference
SwitchGroup
Wraps a group of SwitchGroup.Item components. In addition to all the props defined as HTMLAttributes<HTMLDivElement>, it also accepts the following props:
| Prop | Value | Default |
|---|---|---|
alignLabels | "start" | "end" | end |
description | ReactNode | / |
disabled | boolean | false |
label | ReactNode | / |
required | boolean | false |
tooltip | ReactNode | / |
SwitchGroup.Item
Represents a single option in the group. It includes all of the props of the Switch component, except for alignLabel which is inherited from the parent SwitchGroup component. The props type is defined as Omit<SwitchProps, "alignLabel">.
| Prop | Value | Default |
|---|---|---|
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 SwitchGroup.Item component supports all accessibility features of the Radix Switch primitive.
Examples
Helper text
Helper text
Helper text
Helper text