💎
Prizm Design System Documentation
ShowcaseGitHubRepot a Bug
  • About Prizm
    • Дизайн-система Prizm
    • Changelog
    • License
  • Guidelines
    • ⭕Accessibility
    • ⭕Colors
    • 🚧Design Tokens
      • Color
      • Border Radius
      • Box Shadow
      • Font
      • Line Height
      • Size
      • Space
      • Transition
      • Page
    • ⭕Grid
    • ⭕Iconography
    • ⭕Naming
    • ⭕Typography
    • 🚧Validation
  • Components
    • 🚧Accordion
    • 🚧Breadcrumbs
    • 🚧Buttons
      • Text Button
      • Icon Buttn
      • Split Button
    • 🚧Calendars
      • Calendar
      • Calendar Range
      • ⭕Calendar Month
      • Calendar Year
    • ⭕Card
    • 🚧Checkbox
    • 🚧Chips
    • 🚧Dialogs
      • Confirm dialog
      • Dialog
      • Sidebar
    • ⭕Hierarchy
    • Hint
    • 🚧Indicator
      • 🚧Counter
      • ⭕Point
      • ⭕Icon
    • 🚧Inputs
      • Chips
      • Chips Select
      • Chips Combobox
      • Date
      • Datе Time Range
      • Date Range
    • Navigation menu
    • 🚧Navigation Panel
      • Header
      • Navigation menu
    • 🚧Dropdown Menu
      • Context Menu
      • Dropdown Menu
    • 🚧Paginator
    • 🚧Panel
    • 🚧Progress
      • Bar
      • Spinner
    • 🚧RadioButton
    • 🚧Scrollbar
    • 🚧Shell
    • ⭕Skeleton
    • 🚧Slider
    • 🚧Splitter
    • 🚧Status Panel
    • 🚧Stepper
    • 🚧Switcher
    • ⭕Table
      • Настройки таблицы
    • 🚧Tab
    • Time Picker
    • 🚧Toast
    • 🚧Toggle
    • 🚧Tooltip
    • Tree
      • Tree Chevrone
      • Tree Line
    • 🚧Widget
  • Patterns
    • ⭕403 / 404
    • Query builder
    • ⭕Cron
    • None content
    • ⭕Group Content
    • ⭕File Upload
    • ⭕Side Menu
    • ⭕Zoom Control
Powered by GitBook
On this page
  • Когда использовать
  • Описание работы
  • Ввод данных
  • Удаление данных
  • Переполнение данных

Was this helpful?

  1. Components
  2. Inputs

Chips

PreviousInputsNextChips Select

Last updated 15 days ago

Was this helpful?

Когда использовать

Используйте Input Chips для возможности ввода одного или более элементов.

Описание работы

Ввод данных

После активации поля (кликом на форму ввода) пользователь может ввести значения с клавиатуры. Как только он нажимает Enter, Tab, , (запятую) или покидает поле, значение автоматически преобразуется в чипс.

Удаление данных

Пользователь может удалить ранее добавленные чипсы вручную. Для этого необходимо нажать на иконку удаления (крестик), расположенную внутри каждого чипса. Нажатие иконки очистки инпута приведёт к удалению всех чипсов.

Переполнение данных

Если количество чипсов превышает доступную ширину или высоту поля, лишние элементы автоматически скрываются и заменяются троеточием (…). При наведении курсора на троеточие отображается подсказка (hint), содержащая скрытые значения, перечисленные через запятую. При необходимости компонент можно вручную «развернуть» с помощью функции ресайза — это даст возможность увидеть полный список чипсов внутри поля.

🚧