Skip to main content

Chip field

Overview​

Input chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input and verify that input by converting text into chips.

Use when​

  • Users are selecting from a collection of options.
  • Inputs need to be validated individually.
  • Inputs are removable and should be removed individually.
  • Entering freeform or new categories.

Don't use when​

  • Displaying static attributes. Use badges instead.
  • Entering data that's more than a phrase or two. Use a it requires more than one field to provide the context to the user, consider managing your collection through the list instead.

States​

Alt text

Best practices​

A chip field that wraps to two lines.
A chip field with invalid chips.
check_circle_outlineDo

Input field grows as chips are added to it.

warningCaution

Some or all chips may be considered invalid.

Components​

  • Use a badge for non-interactive data.
  • Use chips to displays filters and choices.
  • The chip field can be use used with an autocomplete to facilitate searching.
  • For an input field without suggested options, use text fields.
  • For a short list of selectable options, use the select.
  • For a short list of selectable options that optimize discoverability, use checkboxes or radio buttons.

Patterns​

  • Chip fields may be used in forms.