Chip
Компонент, который представляет собой элемент, содержащий текстовую информацию, с возможностью удаления.
Чаще всего используется внутри компонентов ChipsInput и ChipsSelect для
отображения выбранных значений.
Режимы отображения
Задаётся свойством mode.
"primary"— основной режим. Используется для стандартного отображения элементов;"secondary"— второстепенный режим со сниженной контрастностью. Используется для менее важной информации, или когда нужно визуально отделить её от фона.
Доступность (a11y)
Компонент обеспечивает базовую доступность, устанавливая HTML-атрибуты aria-readonly и aria-disabled
для readOnly и disabled состояний компонента соответственно.
При использовании кнопки удаления, текст для скринридера формируется автоматически из текста, переданного в removeLabel и
текста, переданного в свойство children.
Свойства и методы
| Свойство | Описание |
|---|---|
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Значение чипа. По умолчанию: - |