Component > Chips

Web [Pattern] Search and Filter Component
1

Chips

Anatomy

|288.6942857142857x182.4979591836735

  1. Container

To hold all chip elements, and their size is determined by those elements.

  1. Text

Chip text here can be an item, or the selected or typed item name, or an operator.

  1. Remove icon (optional)

To remove this chip

Types

Input chips

Input chips represent information used in the input field. It can be converted by the user’s input text, or the filter chips selected from the menu.

Double-clicking input chips will also allow text editing.

An input chip always contains a [x] button to remove this chip from the input field.

Filter Chips

Filter Chips display options in the menu for the user to select and filter content. They can be operators, or items from a category.

States

Input chips

(NO activated state - as that would be in text editing mode)

  • Inactive
  • Hover
  • Focused

Filter Chips

  • Enabled
  • Disabled
  • Hover
  • Focused
  • Pressed