سوییچ (Switch)

معرفی

کامپوننت Switch برای تغییر وضعیت بین دو حالت استفاده می‌شود.

چه زمانی استفاده نکنیم:

• وقتی تغییر نیاز به submit فرم دارد — از Checkbox استفاده کنید
• برای انتخاب بین چند گزینه — از RadioGroup استفاده کنید
• وقتی وضعیت باید confirmed شود — از Checkbox + دکمه submit استفاده کنید

استفاده

import { Switch } from '@parto-system-design/ui'
import { Label } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">حالت هواپیما</Label>
    </div>
  )
}

زمین بازی

با تغییر تنظیمات زیر، سوییچ را به صورت زنده مشاهده کنید.

import { Switch } from '@parto-system-design/ui'

<Switch />

اندازه‌ها

کامپوننت Switch از سه اندازه استاندارد پشتیبانی می‌کند:

<div className="flex items-center gap-4">
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</div>

کوچک (sm)

<Switch size="sm" />

ابعاد: ارتفاع ۱۶ پیکسل، عرض ۲۸ پیکسل

متوسط (md) - پیش‌فرض

<Switch size="md" />
// یا
<Switch />

ابعاد: ارتفاع ۲۰ پیکسل، عرض ۳۴ پیکسل

بزرگ (lg)

<Switch size="lg" />

ابعاد: ارتفاع ۲۴ پیکسل، عرض ۴۴ پیکسل

حالت غیرفعال

<Switch disabled />
<Switch disabled defaultChecked />

کنترل شده

const [checked, setChecked] = React.useState(false)

;<Switch checked={checked} onCheckedChange={setChecked} />

راهنمای استفاده

Props

دسترسی‌پذیری

• از role="switch" استفاده می‌شود
• aria-checked وضعیت روشن/خاموش را اعلام می‌کند
• همیشه با id و Label[htmlFor] همراه کنید
• از صفحه‌کلید با Space قابل فعال‌سازی است

ملاحظات RTL

• انیمیشن حرکت thumb در RTL به‌درستی معکوس می‌شود
• از CSS variables برای کنترل جهت استفاده می‌شود

کامپوننت‌های مرتبط

• Checkbox — اگر تغییر وضعیت نیاز به submit فرم دارد (مانند پذیرش قوانین)، از Checkbox استفاده کنید
• Toggle — اگر نیاز به دکمه فعال/غیرفعال در toolbar دارید، از Toggle استفاده کنید