---
description: Компонент, который представляет собой элемент, содержащий текстовую информацию, с возможностью удаления.
tags: status
---

<Overview group="data-display">

# Chip [tag:component]

Компонент, который представляет собой элемент, содержащий текстовую информацию, с возможностью удаления.
Чаще всего используется внутри компонентов [`ChipsInput`](/components/chips-input) и [`ChipsSelect`](/components/chips-select) для
отображения выбранных значений.

</Overview>

{/* @example-description: Базовый `Chip` с кнопкой удаления выбранного значения. */}
<Playground>
  ```jsx
  <Chip onRemove={() => alert('Обработчик удаления')}>Drummatix</Chip>
  ```
</Playground>

## Режимы отображения

Задаётся свойством `mode`.

- `"primary"` — основной режим. Используется для стандартного отображения элементов;
- `"secondary"` — второстепенный режим со сниженной контрастностью. Используется для менее важной информации, или когда нужно визуально отделить её от фона.

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность, устанавливая HTML-атрибуты `aria-readonly` и `aria-disabled`
для `readOnly` и `disabled` состояний компонента соответственно.

При использовании кнопки удаления, текст для скринридера формируется автоматически из текста, переданного в `removeLabel` и
текста, переданного в свойство `children`.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `after` | `ReactNode` | `-` | Контент после основного содержимого. |
| `before` | `ReactNode` | `-` | Контент перед основным содержимым. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `span` |  |
| `disabled` | `boolean` | `-` | Блокировка взаимодействия с чипом. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `mode` | `"primary" \| "secondary"` | `primary` | Режим отображения компонента. |
| `onRemove` | `((event: MouseEvent<Element, MouseEvent>, value: ChipOptionValue) => void)` | `-` | Обработчик удаления чипа. |
| `readOnly` | `boolean` | `-` | Режим только для чтения. |
| `removable` | `boolean` | `true` | Можно ли удалить чип. |
| `removeLabel` | `string` | `Удалить` | Текст для кнопки удаления. |
| `value` | `ChipOptionValue` | `-` | Значение чипа. |