Switch

نصب

pnpm dlx @simurgh-ui/cli add switch

import { Switch } from '@simurgh-ui/react/switch';
import { Switch as VueSwitch } from '@simurgh-ui/vue/switch';
import { SwitchComponent } from '@simurgh-ui/angular/switch';
import '@simurgh-ui/styles/switch.css';

پیش‌نمایش واقعی

Live component Switch ◆

●Reduced motion

استفاده

<Switch
  name="darkMode"
  value="enabled"
  checked={dark}
  onCheckedChange={setDark}
>
  حالت تیره
</Switch>

<Switch v-model="dark" name="darkMode" value="enabled">
  حالت تیره
</Switch>

<simurgh-switch name="darkMode" value="enabled" [(checked)]="dark">
  حالت تیره
</simurgh-switch>

زمان استفاده

Switch برای تنظیمی است که تغییر آن همان لحظه اعمال می‌شود. اگر کاربر چند گزینهٔ مستقل را انتخاب می‌کند یا تغییر فقط هنگام submit اعمال می‌شود، Checkbox مناسب‌تر است.

state، فرم و دسترس‌پذیری

React از checked/onCheckedChange یا defaultChecked، Vue از v-model و Angular از [(checked)] استفاده می‌کنند. Space حالت را تغییر می‌دهد. label باید نتیجهٔ روشن و خاموش را قابل‌فهم کند و state تنها با رنگ نشان داده نشود.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.