سوییچ (Switch)

معرفی

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

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

• برای پذیرش یک شرط («قبول شرایط») — از Checkbox استفاده کنید. هر فیلد روشن/خاموش، چه اثر فوری داشته باشد چه با دکمهٔ «ذخیره» فرم ثبت شود (مانند «ارسال ایمیل»)، Switch است (جدول «کنترل هر نوع فیلد» در FormRow)
• برای انتخاب بین چند گزینه — از RadioGroup استفاده کنید

استفاده

import { Switch } from '@partodata/ui'
import { Label } from '@partodata/ui'

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

زمین بازی

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

اندازه‌ها

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

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

کوچک (sm)

<Switch size="sm" />

ابعاد: ارتفاع 16 پیکسل، عرض 28 پیکسل

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

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

ابعاد: ارتفاع 20 پیکسل، عرض 34 پیکسل

بزرگ (lg)

<Switch size="lg" />

ابعاد: ارتفاع 24 پیکسل، عرض 44 پیکسل

حالت غیرفعال

<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 — برای پذیرش یک شرط (مانند پذیرش قوانین)، از Checkbox استفاده کنید
• Toggle — اگر نیاز به دکمه فعال/غیرفعال در toolbar دارید، از Toggle استفاده کنید