Component
Checkbox Label
Checkbox witha label and variants.
Installation
Usage
Default
Default checkbox label behavior.
1<CheckboxLabel id="terms" text="Accept terms and conditions" />Strike Variant
Animated strike-through effect when checked.
1<CheckboxLabel id="completed" text="Mark as completed" variants="strike" />Disabled State
Non-interactive state for read-only or unavailable options.
1<CheckboxLabel id="disabled" text="Cannot be changed" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique identifier for the checkbox, used for accessibility and form submission. |
| text | string | — | The label text displayed next to the checkbox. |
| className | string | — | Utility classes for further tweaking appearance, spacing, or layout. |
| disabled | boolean | false | Whether the checkbox is disabled and non-interactive. |
| variants | 'strike' | 'default' | default | Visual variant of the label. Strike adds animated strike-through when checked. |
| ...labelProps | React.ComponentProps<typeof Label> | — | Additional props passed to the underlying Label component. |