Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Types of chipChoice chipsFilter chipsPlacementBest practiceAccessibilityContentAvailabilityCircular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Chip

Chips allow users to filter content or make a choice from a set of options within a compact area.

Chip
Types of chip

You can use chips in 2 different ways — as choice chips, or as filter chips.

Choice chips let users choose one chip from a set, whereas filter chips let users add multiple filters.

Choice chips

Choice chips let users choose a single chip from a set.

Choice chips

Interaction

Best practice for choice chips is to have one chip pre-selected by default, like radio buttons. This should be the most desired or most frequently selected chip.

Then, if the user wants to make a different selection, they can tap or click on one of the unselected chips. Selecting a new chip will unselect the original one, so there is never more than one chip selected at once.

Filter chips

Filter chips let users add filters to content by selecting one or more chips from a set.

Filter chips

Interaction

Filter chips are unselected by default. The user can then tap or click on each chip to select as many as they like. Tapping or clicking the clear button will unselect the chip.

When selecting a filter chip, it’s also possible to trigger additional input information in a dropdown or bottom sheet. The item selected would form a new chip at the start of the list, while the original chip that triggered the dropdown or bottom sheet would remain in place.

Placement

Whether you're using filter chips or choice chips, the chips should be placed in a horizontally scrollable row on the screen.

They can be shown underneath a search field, and are normally positioned towards the top of the screen or above the content that they filter.

Best practice
  • Always use chips in a set — they should never stand alone.
  • Try to optimise the list, by putting the most frequently selected chip at the start.
  • Don't let the list of chips get too long.

Accessibility

Chips should stay in the same position when selected, as the movement of reordering the list based on selection would add too much cognitive load for users.

With filter chips, if a new chip is added from a bottom sheet or dropdown, it should appear at the front of the list. But the rest of the order should stay the same.

Content

Text

Chip text should:

  • be extremely short (just one word where possible)

  • describe a single element — (usually a noun)

  • work as part of a coherent set (chips are always displayed alongside other chips)

  • be in sentence case

  • have no full stop

Chips with single words.
Chips with inconsistent text.
Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation