Chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

Action Chips Demo

wb_sunny
Turn lights on
bookmark
Bookmark
alarm
Set alarm
directions
Get directions

Choice Chips Demo

Extra Small
Small
Medium
Large
Extra Large

Filter Chips Demo

message
Messages
notification_important
Notifications
warning
Warnings
error
Errors

Input Chips Demo

face
claire
cancel
face
pete
cancel
face
anne
cancel

API

Directive: MdcChipIconDirective

Selector: [mdcChipIcon]

Directive for the (optional) leading or trailing icon of an mdcChip. Depenending on the position within the mdcChip the icon will determine whether it is a leading or trailing icon. Trailing icons must implement the functionality to remove the chip from the set, and must only be added to input chips (mdcChipSet="input"). Chips with a trailing icon must implement the remove event.

PropertyDescription
@Output()
interact
EventEmitter<void>

Event emitted for trailing icon user interactions.

Directive: MdcChipTextDirective

Selector: [mdcChipText]

Directive for the text of an mdcChip.

Directive: MdcChipDirective

Selector: [mdcChip]

Directive for a chip. Chips must be child elements of an mdcChipSet.

PropertyDescription
@Output()
interact
EventEmitter<void>

Event emitted for user interaction with the chip.

@Output()
remove
EventEmitter<void>

Event emitted when the user has removed (by clicking the trailing icon) the chip. This event must be implemented when the chip has a trailing icon, and the implementation must remove the chip from the set. Without such implementation the directive will animate the chip out of vision, but will not remove the chip from the DOM.

@Output()
selectedChange
EventEmitter<boolean>

Event emitted when the chip changes from not-selected to selected state or vice versa (for filter and choice chips).

@Input()
selected
any

The 'selected' state of the chip. Filter and choice chips are either selected or not selected. Making a choice chip selected, will make all other chips in that set not selected.

Directive: MdcChipSetDirective

Selector: [mdcChipSet]

Directive for a chip-set (a collection of mdcChip).

PropertyDescription
@Input()
mdcChipSet
any

Chip sets by default contain 'action' chips. Set this value to choice, filter, input, or action to determine the kind of chips that are contained in the chip set.