گروه تاگل (Toggle Group)

معرفی

کامپوننت ToggleGroup برای گروه‌بندی دکمه‌های toggle استفاده می‌شود.

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

• برای ناوبری بین صفحات — از Tabs استفاده کنید
• برای بیش از ۵ گزینه — از Select استفاده کنید
• وقتی فقط یک گزینه قابل انتخاب است — از RadioGroup استفاده کنید

استفاده

import { ToggleGroup, ToggleGroupItem } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <ToggleGroup type="single">
      <ToggleGroupItem value="left">چپ</ToggleGroupItem>
      <ToggleGroupItem value="center">وسط</ToggleGroupItem>
      <ToggleGroupItem value="right">راست</ToggleGroupItem>
    </ToggleGroup>
  )
}

چند انتخابی

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

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

Props

ToggleGroup

ToggleGroupItem

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

• نقش group از Radix UI به‌صورت خودکار اعمال می‌شود
• هر آیتم دارای aria-pressed (در حالت toggle) است
• از aria-label روی گروه برای توصیف هدف استفاده کنید

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

• Tabs — اگر هر گزینه محتوای مرتبط جداگانه‌ای دارد (مانند پنل‌های محتوا)، از Tabs استفاده کنید
• RadioGroup — اگر نیاز به انتخاب تک‌گزینه‌ای با label کامل در فرم دارید، از RadioGroup استفاده کنید
• ViewToggle — اگر فقط نیاز به تغییر حالت نمایش (grid/list) دارید، ViewToggle اختصاصی‌تر است