شريحة

Chip

شريحة قابلة للاختيار في React لأشرطة التصفية وقوائم الاختيار المتعدّد والرموز القابلة للإزالة، بأنماط وأيقونات وشكل دائري. تعرض aria-pressed.

متى تستخدمه

استخدم Chip حين يجب أن تبقى مجموعة الخيارات ظاهرة وتتبدّل باللمس: مرشّحات فوق قائمة، أو فئات في صفحة بحث، أو قيم مختارة يمكن إزالتها. استخدم Tag للتسمية الثابتة بلا تفاعل.

أبقِ الشرائح في سطر واحد ورتّبها حسب تكرار الاستخدام.

أمثلة

الأنماط

شريط تصفية (مُتحكَّم به)

مع أيقونات

دائري

الخصائص

الخصائص التي يعرّفها Chip. سمات العنصر الأصلي تمرّ كما هي.

الخاصية	النوع	الوصف
`variant`	`"primary" \| "neutral"`
`size`	`"sm" \| "md" \| "lg"`
`rounded`	`boolean`
`onColor`	`boolean`
`selected`	`boolean`	Controlled selected state - drives `aria-pressed` and the filled treatment.
`defaultSelected`	`boolean`	Uncontrolled initial selected state.
`onSelectedChange`	`(selected: boolean) => void`	Called with the next selected value when the chip toggles.
`leadingIcon`	`react.ReactNode`	Leading icon (inherits the chip text colour; 14px, 18px at `lg`).
`trailingIcon`	`react.ReactNode`	Trailing icon.
`asChild`	`boolean`	Render as the child element (Radix `Slot`) - e.g. wrap a router link.

إمكانية الوصول

Chip زر تبديل بـ aria-pressed، فتُعلن حالة اختياره. يبدّله Space وEnter، وتستخدم الشرائح المعطّلة aria-disabled لتبقى في ترتيب القراءة.

تغيّر حالة الاختيار التعبئة والحدود لا اللون فقط. لزر إغلاق الشريحة القابلة للإزالة اسمه المتاح.