Checkbox
A control that allows the user to toggle between checked, unchecked, and indeterminate states.
Installation
tsx
import { Checkbox, CheckboxGroup } from "madagent";Default
Variants
With Subtitle and Description
Recommended
Indeterminate
Checkbox Group
Horizontal Group
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | Label text displayed next to the checkbox |
subtitle | string | - | Secondary text next to the label |
description | string | - | Description text below the control |
indeterminate | boolean | false | Shows indeterminate (minus) state |
variant | "default""todo" | "default" | Visual variant |
disabled | boolean | false | Disables the checkbox |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<CheckboxGroup legend="تفضيلات الإشعارات">
<Checkbox label="تفعيل الإشعارات" defaultChecked />
<Checkbox label="إرسال رسائل بريد إلكتروني" />
<Checkbox label="إشعارات الهاتف المحمول" defaultChecked />
</CheckboxGroup>