Chips

Chips are compact elements that represent an input, attribute, or action.

Android check Web Flutter iOS

Usage

Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Principles

Compact

Chips are compact components that represent discrete information.

Relevant

Chips should have a clear and helpful relationship to the content or task they represent.

Focused

Chips should make tasks easier to complete, or content easier to sort.


Types

Input chips
Input chips represent information used in fields, such as an entity or different attributes.
Choice chips
In sets that contain at least two options, choice chips represent a single selection.
Filter chips
Filter chips represent filters for a collection.
Action chips
Action chips trigger actions related to primary content.

Anatomy

1. Container
Chip containers hold all chip elements, and their size is determined by those elements. A container can also be defined by a stroke.

2. Thumbnail [optional]
Thumbnails identify entities (like individuals) by displaying an avatar, logo, or icon.

3. Text
Chip text can be an entity name, description, tag, action, or conversational.

4. Remove icon [optional]
Input chips can include a Remove icon.


Input chips

Usage

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...

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.

An input chip used to show an entity.
An outlined input chip used to show an entity.
Input chips can provide suggested responses.

Behavior

Input chips are predictive, editable, movable, expandable, and appear in groups.

Transformative

Input chips transform text based on user input.

Text transforming into an input chip.

Editable

An input chip’s text is editable until the user takes an action with the chip, such as sending an email. To edit an input chip’s text, tap the chip.

Input chips become editable when tapped.

Informational

If text input is not recognized by the system, input chips can display an error state.

Input chips can represent an error state.

Multiple

A single field can contain multiple input chips.

Multiple entry chips

Movable

Input chips can be reordered or moved into other fields.

Movable entry chips

Expandable

Input chips can expand to show more information or options. A container transform transition pattern is used to reveal additional content.

Expandable entry chips

Placement

Input chips work together with other UI elements.

Input chips can be integrated with other components. They can appear:

  • Inline with the text input cursor in a field
  • In a stacked list
  • In a horizontally scrollable list
Input chips can wrap to a new row if all of the chips need to be visible.
Input chips that horizontally scroll.

States

Input chips states

Input chips states

Choice chips

Usage

Choice chips allow selection of a single chip from a set of options. Choice chips clearly delineate and display options in a compact area. They...

Choice chips allow selection of a single chip from a set of options.

Choice chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

A set of choice chips
A set of outlined choice chips

Behavior

Selecting a single choice chip automatically deselects all other chips in the set.

Selecting a single choice chip automatically deselects all other chips in the set.

Selecting a choice chip deselects the other chips

Placement

Choice chips appear as part of a series of other choice chips. They are typically displayed horizontally and sequentially. An overlay is a semi-transparent covering...

Choice chips appear as part of a series of other choice chips. They are typically displayed horizontally and sequentially.

DoHorizontal placement of choice chips
DoChoice chips can scroll horizontally.
CautionChoice chips can wrap to a new row. However, using two or more rows of choice chips can make each chip harder to scan.
Don'tChoice chips shouldn’t present only a single option.

States

Choice chips states

Choice chips states

Filter chips

Usage

Filter chips use tags or descriptive words to filter content. Filter chips clearly delineate and display options in a compact area. They are a good...

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

A filter chip
An outlined filter chip

Behavior

Tap a chip to select it. Multiple chips can be selected or unselected.

Tap a chip to select it. Multiple chips can be selected or unselected.

An icon can be added to indicate when a filter chip is selected.
Filter chip suggestions can dynamically change as users start to select filters.

Placement

Filter chips can live with other elements in a UI.

Filter chips can be shown underneath a search field.
Display multiple sets of filters in a side sheet.
Filter chips can wrap to a new row. If there are more than two rows, consider using horizontal scrolling to access them all.
Filter chips can horizontally scroll to show unlimited options.
Don'tFilter chips should not present only a single option.

States

Choice chips states

Filter chips states

Action chips

Usage

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI. An alternative to action chips are buttons, which...

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

An action chip
An outlined action chip

Behavior

Action chips can trigger an action or show progress and confirmation.

Action chips can trigger an action or show progress and confirmation.

Tapping an action chip triggers a contextual action.
Action chips can show progress and confirmation feedback.

Placement

Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen. Buttons allow users to take...

Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen.

Action chips should be shown underneath primary content.
CautionAction chips should appear in a set.
DoAction chips can be horizontally scrollable.

States

Choice chips states

Action chips states

Theming

Reply Material theme

This email app’s input chips have been customized using Material Theming. Areas of customization include color, typography, and shape. Reply is an email app that...

Color

Reply’s input chips use custom color on two elements: text, container.

Element Category Attribute Value
Text On Surface Color
Opacity
#232F34
100%
Container On Surface Color
Opacity
#232F34
12%

Typography

Reply’s input chips use custom typography for the text.

Element Category Attribute Value
Text Body 2 Typeface
Font
Size
Case
Work Sans
Regular
15
Sentence case

Shape

Reply’s input chip containers have custom corner shapes.

Element Category Attribute Value
Container Small component Family
Size
Rounded
50%

Shrine Material theme

Choice chips with customized shape, color, and typography.

Color

Shrine’s choice chips use custom color on four elements: selected container, selected text, unselected container, and unselected text.

Element Category Attribute Value
Selected container Primary Color
Opacity
#FEDBD0
100%
Selected text On Primary Color
Opacity
#442C2E
100%
Unselected text On Surface Color
Opacity
#442C2E
100%
Unselected container On Surface Color
Opacity
#442C2E
12%

Typography

Shrine’s choice chips use custom typography for the text.

Element Category Attribute Value
Text Body 2 Typeface
Font
Size
Case
Rubik
Medium
14
Sentence case

Shape

Shrine’s choice chip containers have custom corner shapes. Shrine’s chips use an override of the small component shape category family and size values.

Element Category Attribute Value
Container Override* Family
Size
Rounded
4dp;4dp;4dp;4dp

Fortnightly Material theme

Filter chips with customized shape, color, and typography.

Color

Fortnightly’s filter chips use custom color on two elements: text, and container stroke.

Element Category Attribute Value
Text On Surface Color
Opacity
#000000
87%
Container stroke On Surface Color
Opacity
#000000
12%

Typography

Fortnightly’s filter chips use custom typography for the text.

Element Category Attribute Value
Text Body 2 Typeface
Font
Size
Case
Libre Franklin
Regular
14
Title case

Shape

Fortnightly’s filter chip containers have custom corner shapes, with 0dp cut corners.

Element Category Attribute Value
Container Small component Family
Size
Cut
0dp;0dp;0dp;0dp

Specs

Action chip

  • Measurement 32
  • Measurement 12
  • Measurement 12
  • Measurement C
 

Outlined action chip

  • Measurement 4
  • Measurement 12
  • Measurement 8
  • Measurement 1
  • Measurement 32
  • Measurement 24
  • Measurement C
 

Choice chip

  • Measurement 12
  • Measurement 12
  • Measurement 32
  • Measurement C
 

Filter chip

  • Measurement 12
  • Measurement C
  • Measurement 32
  • Measurement 12
 

Input chips

  • Measurement 4dp
  • Measurement 8
  • Measurement 8
  • Measurement 32
  • Measurement C
  • Measurement 24
  • Measurement 18
  • Measurement 8
 

Chips in groups

  • Measurement 8
 

Using chips

Before you can use Material chips, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Usage

A Chip can be added in a layout like so:

Changes to a chip can be observed like so:

Making chips accessible

Chips support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in chips is automatically provided to accessibility services. Additional content labels are usually unnecessary.

Touch target

The Widget.MaterialComponents.Chip.* styles use an InsetDrawable to extend the chip's touch target when necessary to meet Android's recommended accessibility touch target size. Developers can override a chip's minimum touch target size using app:chipMinTouchTargetSize. Developers can set whether the chip should extend its bounds to meet the minimum touch target using app:ensureMinTouchTargetSize (true by default).

RTL-friendly chip layout

Call setLayoutDirection(int) with View.LAYOUT_DIRECTION_LOCALE to ensure that the chip's ancestor TextView renders the text with proper paddings. Without this, the initial rendering may look like the text has its padding set according to LTR direction.

Grouping chips with ChipGroup

Chips are mostly commonly used in groups. We recommend using ChipGroup as it is purpose-built to handle multi-chip layout and behavior patterns (as opposed to a ViewGroup such as RecyclerView). A ChipGroup contains a set of Chips and manages their layout and multiple-exclusion scope, similarly to a RadioGroup.

Layout Mode

A ChipGroup rearranges chips across multiple rows by default.

"6 grey "Filter" chips spread across 2 lines: "Filters" 1 and 3 selected and
are darker grey and include checkmarks."

A ChipGroup can also constrain its chips to a single row using the app:singleLine attribute. Using a single row may necessitate wrapping the ChipGroup with a HorizontalScrollView.

"Single line of grey chips: chips 1, 2, and 3 are fully visible, chip 4 is
partly visible"

Chip spacing

A ChipGroup can insert spacing between chips in a row or between rows of chips using the app:chipSpacing attribute. Different horizontal and vertical spacing can be set using the app:chipSpacingHorizontal and app:chipSpacingVertical attributes.

Note: The app:chipMinTouchTargetSize will overrule vertical chip spacing for lower amounts.

The following image shows a group of chips with app:chipSpacingHorizontal="42dp".

"6 grey chips in 2 rows with 42dp horizontal spacing"

Multiple exclusion scope

The app:singleSelection attribute can be set to true on a ChipGroup in order to toggle single-select and multi-select behavior of child chips.

The app:selectionRequired attribute can be set to true on a ChipGroup to prevent all child chips from being deselected (i.e. at least one option should be chosen).

Handling checked chips

Changes to child chip checked/unchecked state can be observed like so:

Standalone ChipDrawable

A standalone ChipDrawable can be used in contexts that require a Drawable. The most obvious use case is in text fields that "chipify" contacts, commonly found in communications apps.

To use a ChipDrawable, first create a chip resource in res/xml. Note that you must use the <chip tag in your resource file.

In res/xml/standalone_chip.xml:

Entry Chip is the default Material style for standalone ChipDrawables, but you can apply any of the other styles using the style attribute. All the attributes on Chip can be applied to a ChipDrawable resource.

A ChipDrawable can then be inflated from this resource like so:

For example, consider an editable e-mail address field that converts addresses to chips as they are typed and validated. We can combine ChipDrawable with spans to add a chip to an EditText:

"Standalone chip inside a text field"

Types

There are four types of chips: 1. input (entry), 2. choice, 3. filter, 4. action

Examples of the four different chip types

API and source code:

Input chip

Input chips (refered to as entry chips in Android) 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.

Input chip example

The following example shows three input chips.

"Input chips with texts Input 1 to 3."

In the layout:

Choice chip

Choice chips allow selection of a single chip from a set of options.

Choice chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

Caveats

If you add choice chips to a dialog (which has 24dp elevation), disable the chips' elevation overlays to ensure that there is sufficient color contrast when the chips are checked.

Choice chip example

The following example shows four choice chips.

"4 choice chips, Choice 1 is selected with purple fill, Choices 2-4 unselected
with grey fill"

In the layout:

Filter chip

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Filter chip example

The following example shows six filter chips.

"6 grey "Filter" chips spread across 2 lines: "Filters" 1 and 3 selected and
are darker grey and include checkmarks."

In the layout:

Action chip

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

Action chip example

The following example shows four action chips.

"Actions chips with texts Action 1 to 4 and icons."

In the layout:

Anatomy and key properties

The following is an anatomy diagram of a chip:

Chip anatomy diagram

  1. Container
  2. Thumbnail (optional)
  3. Text
  4. Remove icon (optional)

Container attributes

ElementAttributeRelated method(s)Default value
Colorapp:chipBackgroundColorsetChipBackgroundColor
setChipBackgroundColorResource
getChipBackgroundColor
?attr/colorOnSurface at 10%
Ripple colorapp:rippleColorsetRippleColor
setRippleColorResource
getRippleColor
?attr/colorOnSurface at 12%
Stroke widthapp:chipStrokeWidthsetStrokeWidth
setChipStrokeWidthResource
getChipStrokeWidth
0dp
Stroke colorapp:chipStrokeColorsetStrokeColor
setChipStrokeColorResource
getChipStrokeColor
?attr/colorOnSurface
Min heightapp:chipMinHeightsetChipMinHeight
setChipMinHeightResource
getChipMinHeight
32dp
Paddingapp:chipStartPadding
app:chipEndPadding
setChip*Padding
setChip*PaddingResource
getChip*Padding
4dp (start)
6dp (end)
Shapeapp:shapeAppearance
shapeAppearanceOverlay
setShapeAppearanceModel
getShapeAppearanceModel
?attr/shapeAppearanceSmallComponent with 50% cornerSize
Min touch targetapp:chipMinTouchTargetSize
app:ensureMinTouchTargetSize
ensureAccessibleTouchTarget
setEnsureAccessibleTouchTarget
shouldEnsureAccessibleTouchTarget
48dp
true
Checkableandroid:checkablesetCheckable
setCheckableResource
isCheckable
true (entry, filter, choice)

Thumbnail attributes

Chip icon

ElementAttributeRelated method(s)Default value
Iconapp:chipIconsetChipIconVisible
isChipIconVisible
null
Visibilityapp:chipIconVisiblesetChipIcon
setChipIconResource
getChipIcon
true (action and entry)
Colorapp:chipIconTintsetChipIconTint
setChipIconTintResource
getChipIconTint
null
Sizeapp:chipIconSizesetChipIconSize
setChipIconSizeResource
getChipIconSize
24dp
Paddingapp:iconStartPadding
app:iconEndPadding
setIcon*Padding
setIcon*PaddingResource
getIcon*Padding
0dp

Checked icon

If visible, the checked icon overlays the chip icon.

ElementAttributeRelated method(s)Default value
Iconapp:checkedIconsetCheckedIconVisible
isCheckedIconVisible
@drawable/ic_mtrl_chip_checked_circle
Visibilityapp:checkedIconVisiblesetCheckedIcon
setCheckedIconResource
getCheckedIcon
true (entry, filter, choice)
Colorapp:checkedIconTintsetCheckedIconTint
setCheckedIconTintResource
getCheckedIconTint
null

Text attributes

ElementAttributeRelated method(s)Default value
Text labelandroid:textsetChipText
setChipTextResource
getChipText
null
Colorandroid:textColorsetTextColor
getTextColors
?attr/colorOnSurface at 87%
Typographyandroid:textAppearancesetTextAppearance
setTextAppearanceResource
getTextAppearance
?attr/textAppearanceBody2
Paddingapp:textStartPadding
app:textEndPadding
setText*Padding
setText*PaddingResource
getText*Padding
8dp (start)
6dp (end)

Remove (close) icon attributes

ElementAttributeRelated method(s)Default value
Iconapp:closeIconsetCloseIcon
setCloseIconResource
getCloseIcon
@drawable/ic_mtrl_chip_close_circle
Visibilityapp:closeIconVisiblesetCloseIconVisible
isCloseIconVisible
true for entry
Colorapp:closeIconTintsetCloseIconTint
setCloseIconTintResource
getCloseIconTint
?attr/colorOnSurface at 87%
Sizeapp:closeIconSizesetCloseIconSize
setCloseIconSizeResource
getCloseIconSize
18dp
Paddingapp:closeIconStartPadding
app:closeIconEndPadding
setCloseIcon*Padding
setCloseIcon*PaddingResource
getCloseIcon*Padding
2dp
Content descriptionN/AsetCloseIconContentDescription
getCloseIconContentDescription
@string/mtrl_chip_close_icon_content_description

ChipGroup attributes

ElementAttributeRelated method(s)Default value
Layoutapp:singleLinesetSingleLine
isSingleLine
false
Selectionapp:singleSelection
app:selectionRequired
setSingleSelection*
isSingleSelection*
false
false
Spacingapp:chipSpacing
app:chipSpacingHorizontal
chipSpacingVertical
setSpacing*
setChipSpacing*Resource
getSpacing*
8dp

Styles

ElementStyle
Default style (action chip)Widget.MaterialComponents.Chip.Action
Input (entry) chipWidget.MaterialComponents.Chip.Entry
Choice chipWidget.MaterialComponents.Chip.Choice
Filter chipWidget.MaterialComponents.Chip.Filter
ChipGroup styleWidget.MaterialComponents.ChipGroup

Theme attributes

ElementTheme attributeDefault style
Chip?attr/chipStyleWidget.MaterialComponents.Chip.Action
ChipGroup?attr/chipGroupStyleWidget.MaterialComponents.ChipGroup
ChipDrawable?attr/chipStandaloneStyleWidget.MaterialComponents.Chip.Entry

See the full list of styles and attributes.

Theming chips

Chips support Material Theming and can be customized in terms of color, typography and shape.

Chip theming example

API and source code:

The following example shows chips with Material Theming.

"3 chips with brown text and icons, white fill, and pink outlines"

Implementing chip theming

Using theme attributes and styles in res/values/styles.xml (themes all chips and affects other components):

in color/stroke_tint.xml:

or using a default style theme attribute, styles and a theme overlay (themes all chips but does not affect other components):

or using the style in the layout (affects only this specific chips):

No Android implementation guidance available

Using chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.

Installing chips

Styles

JavaScript instantiation

Note: there's work planned to replace the mdc-evolution-* prefix of chips with the standard mdc-chip-* prefix.

Chips

Chips are comprised of chip sets which are comprised of chip instances which are in turn comprised of actions. See the readme for each subcomponent for more detail.

Basic action chip set example

API

See the readme of each subcomponent for more detail.

Usage within frameworks

If you are using a JavaScript framework, such as React or Angular, you can create chips for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

No Web implementation guidance available

Using chips

Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Making chips accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

Types

There are four different types of chips that are subclasses of Chip, including 1.input, 2.choice, 3.filter, and 4.action.

Examples of the four different chip types

Anatomy and key properties

The following is an anatomy diagram of a chip:

Chip anatomy diagram

  1. Container
  2. Thumbnail (optional)
  3. Text
  4. Remove icon (optional)

Container

 Property
Heightpadding

Thumbnail

 Property
avataravatar
borderavatarBorder

Text

 Property
Text labellabel and use Text widget
Colorlabel and use Text widget within textWidget set style
Typographylabel and use Text widget within textWidget set style
paddinglabelPadding

Remove icon

 Property
colordeleteIconColor

Input chips

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.

Input chips example

InputChip

Input Chips

Choice chips

Choice chips allow selection of a single chip from a set of options.

Choice chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

Choice chips example

ChoiceChip

Choice Chips

Filter chips

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Filter chips example

FilterChip

Filter Chips

Action chips

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

Action chips example

ActionChip

Action Chips

Theming

Chips support Material Theming and can be customized in terms of color, typography and shape.

Theming example

InputChip

Theme Chips

No Flutter implementation guidance available

Using chips

Installing

To use chips in your app first add the following to your Podfile:

Then, run the following command:

From there, import the relevant target or file.

Swift

Objective-C

Making chips accessible

Always verify that your chips meet minimum touch requirements, as defined by either Apple's Human Interface Guidelines or Material. Material recommends a 44x44 minimum touch target.

Remember to set any relevant accessibilityLabels or accessibilityTraits, especially if you are not satisfied with default system-assigned values.

Types

There are four types of chips: 1. Input (text entry) 2. Choice 3. Filter 4. Action

Examples of the four different chip types

It is possible to create each type of chip by instantiating a single MDCChipView and adidng it to your view controller just like any other UIView.

Swift

Objective-C

MDCChipView allows for customization of the following:

Ink ripple animation

Chips display animated ink splashes when the user presses the chip. Note that if you have a background color set for the highlighted state the ink animation will occur on top of that color.

Stateful properties

Like UIButton, MDCChipView provides many state-dependant accessors. These methods allow you to set the background color, title color, border style, and elevation, both for individual states and combinations of states. If no value is set for a given state, the normal value will used.

Selected Image View

Setting the image for the selectedImageView is optional but can help clarify that a chip is selected. This image will only appear when the chip is selected. If you have an image set on the standard imageView, then the selectedImageView will appear on top of it. Otherwise you'll need to resize the chip to show the selected image. See the Filter chip example to see this in action.

Padding

There are 4 padding properties that determine a chip's layout: one for each of the chip's subviews (imageView and selectedImageView share one padding property), and one which wraps all the others (contentPadding). This is useful so that you can set each of the padding properties to ensure your chips look correct whether or not they have an image and/or accessory view. The chip uses these property to determine intrinsicContentSize and sizeThatFits.

Adjusting chip sizes after changing the label

If the label of a chip in a collection view can be changed dynamically (e.g. in reaction to a user's tap), then you may notice that the chip's frame does not automatically update to accomodate the new size of the chip's label. To force your chip to update its layout when this happens you can invoke invalidateIntrinsicContentSize on the chip view. For example:

Swift

Objective-C

Input chip

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.

We currently provide an implementation of Input Chips called MDCChipField.

Swift

Objective-C

Choice chip

Choice chips allow selection of a single chip from a set of options.

Choice chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

It is easiest to create choice Chips using a UICollectionView:

  • Use MDCChipCollectionViewFlowLayout as the UICollectionView layout:

Swift

Objective-C

  • Leave the default UICollectionView selection setting (single selection).
  • Use MDCChipCollectionViewCell as UICollectionView cells. (MDCChipCollectionViewCell manages the state of the chip based on selection state of UICollectionView automatically)

Swift

Objective-C

  • Use UICollectionViewDelegate methods collectionView:didSelectItemAtIndexPath: for reacting to new choices.

  • Use UICollectionViewselectItemAtIndexPath:animated:scrollPosition: method to edit choice selection programmatically.

Filter chip

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

It is easiest to create filter Chips using a UICollectionView:

  • Use MDCChipCollectionViewFlowLayout as the UICollectionView layout:

Swift

Objective-C

  • Allow multi cell selection in the UICollectionView:

Swift

Objective-C

  • Use MDCChipCollectionViewCell as UICollectionView cells. (MDCChipCollectionViewCell manages the state of the chip based on selection state of UICollectionView automatically)

Swift

Objective-C

  • Use UICollectionViewDelegate methods collectionView:didSelectItemAtIndexPath: and collectionView:didDeselectItemAtIndexPath: for reacting to filter changes.

  • Use UICollectionViewdeselectItemAtIndexPath:animated: and selectItemAtIndexPath:animated:scrollPosition: methods to edit filter selection in code.

Action chip

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

It is easiest to create action Chips using a UICollectionView:

  • Use MDCChipCollectionViewFlowLayout as the UICollectionView layout:

Swift

Objective-C

  • Leave the default UICollectionView selection setting (single selection).
  • Use MDCChipCollectionViewCell as UICollectionView cells. (MDCChipCollectionViewCell manages the state of the chip based on selection state of UICollectionView automatically)

Swift

Objective-C

  • Make sure that MDCChipCollectionViewCell does not stay in selected state

Swift

Objective-C

  • Use UICollectionViewDelegate method collectionView:didSelectItemAtIndexPath: to Trigger the action.

Anatomy and key properties

The following is an anatomy diagram of a chip:

Chip anatomy diagram

  1. Container
  2. Thumbnail (optional)
  3. Text
  4. Remove icon (optional)

Container attributes

 AttributeRelated method(s)Default value
ColorN/A-setBackgroundColor:forState:
-backgroundColorForState:
On surface color at 12% opacity
Ripple colorN/A-setRippleColor:forState:
-rippleColorForState:
White at 14% opacity
Stroke widthN/A-setBorderWidth:forState:
-borderWidthForState:
0
Stroke colorN/A-setBorderColor:forState:
-borderColorForState:
nil
Min heightminimumSizeN/A{ 0, 32 }
PaddingcontentPaddingN/A{ 4, 4, 4, 4 }
Min touch targetcenterVisibleArea, visibleAreaInsetsN/ANO, { 0, 0, 0, 0 }

Thumbnail attributes

Chip icon

 AttributeRelated method(s)Default value
IconimageView, selectedImageViewN/Anil
PaddingimagePadding, accessoryPaddingN/A{ 0, 0, 0, 0 }, { 0, 0, 0, 0 }

Text attributes

 AttributeRelated method(s)Default value
Text labeltitleLabelN/AN/A
ColorN/A-setTitleColor:forState:
-titleColorForState:
On surface color at 87% opacity
TypographytitleFontN/ABody 2
PaddingtitlePaddingN/A{ 3, 8, 4, 8 }

Theming

MDCChipView supports Material Theming using a Container Scheme. To install the MDCChipView theming extension, first add the following line to your Podfile:

Then run the installer:

There are two theming variants for MDCChipView: the default theme and the outlined theme.

Below is a Chip collection with the Shrine outlined theme applied to it.

shrine-chips

Swift

Objective-C

No iOS implementation guidance available

Up next