Switch
A toggle control for switching between on and off states.
Installation
tsx
import { Switch } from "madagent";Default
Sizes
With Description
Checked
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | Label text displayed next to the switch |
description | string | - | Description text below the control |
size | "sm""lg" | "sm" | Switch size |
disabled | boolean | false | Disables the switch |
checked | boolean | - | Controlled checked state |
defaultChecked | boolean | - | Initial checked state (uncontrolled) |
onChange | (e: ChangeEvent) => void | - | Called when the switch is toggled |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
<Switch label="تفعيل الإشعارات" defaultChecked />
<Switch label="الوضع المظلم" />
<Switch label="وضع الطيران" description="تعطيل جميع الاتصالات اللاسلكية" />
</div>