Chip

کامپوننت Chip برای نمایش گزینه‌های انتخاب‌شده یا برچسب‌های قابل‌حذف استفاده می‌شود؛ مثل فیلترهای اعمال‌شده، دسته‌بندی‌ها یا گیرندگان یک ایمیل. با پاس‌دادن onRemove دکمه‌ی ✕ کنار متن نمایش داده می‌شود.

Import

import { Chip } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Chip>برنامه‌نویسی</Chip>

Playground

برنامه‌نویسی

children

onRemove

<Chip onRemove={handleRemove}>برنامه‌نویسی</Chip>

Applied Filters Pattern

رایج‌ترین استفاده‌ی Chip، نمایش فیلترهای فعال و اجازه‌ی حذف تک‌تک آن‌هاست:

const [filters, setFilters] = useState(["تهران", "اصفهان"]);

{
  filters.map((f) => (
    <Chip key={f} onRemove={() => setFilters((prev) => prev.filter((x) => x !== f))}>
      {f}
    </Chip>
  ));
}

Chip vs Badge

• Chip — برچسب تعاملی؛ می‌تواند دکمه‌ی حذف داشته باشد
• Badge — برچسب فقط‌نمایشی برای وضعیت

Accessibility

• دکمه‌ی حذف دارای aria-label="حذف" است و با صفحه‌کلید قابل استفاده است.
• متن اصلی Chip باید به‌تنهایی مفهوم برچسب یا فیلتر را منتقل کند؛ دکمه‌ی حذف فقط action حذف را انجام می‌دهد.
• Chip خودش نقش button یا link ندارد. اگر کل چیپ باید قابل کلیک باشد، action را با یک عنصر تعاملی جداگانه پیاده‌سازی کن.

Data Attributes and Customize CSS

Chip hookهای زیر را روی DOM قرار می‌دهد:

Attribute	کاربرد
data-fara-chip	span ریشه
data-removable	وقتی onRemove داده شده باشد وجود دارد
data-fara-chip-remove	دکمه‌ی حذف

<Chip className="active-filter" onRemove={() => removeFilter("تهران")}>
  شهر: تهران
</Chip>

[data-fara-chip] {
  max-width: 240px;
}

[data-fara-chip][data-removable] {
  padding-inline-end: 4px;
}

[data-fara-chip-remove] {
  width: 20px;
  height: 20px;
}

[data-fara-chip].active-filter {
  background: #dbeafe;
  color: #1e40af;
}

data-removable برای استایل عمومی چیپ‌های قابل‌حذف مناسب است و className برای یک نمونه یا نوع خاص.

Props

Prop	Type	Default	Description
children	ReactNode	-	متن یا محتوای چیپ (الزامی)
onRemove	() => void	-	با پاس‌دادن آن دکمه‌ی حذف نمایش داده می‌شود
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <span> نیز پشتیبانی می‌شوند.