Checkbox
A user interface control enabling toggling between checked and unchecked states.
Helper text
Usage
import { Checkbox } from "@lemonsqueezy/wedges";For more advanced usage you can use Checkbox.Root component to customize the appearance of the checkbox.
<Checkbox label="Label" />API Reference
Checkbox component extends Radix Checkbox primitive and supports all of its props.
| 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" | "indeterminate" |
Accessibility
The Checkbox component supports all accessibility features of the Radix Checkbox primitive.
Examples
Helper text
Indeterminate
The following example shows a customized Checkbox component: