Chip

• single select - only one chip from the set can be selected.
• multi-select - none or all of the chips can be selected.

Single-select

In this mode chips behave like radio buttons. Only one chip can be selected at a time.

This pattern is useful when users must choose one item from a set, for instance in a wizard.

For use in forms consider using a standard radio button instead.

• Chips must always be presented in a set of at least two.
• Chips should be surrounded with a <radiogroup> with a label describing what the user is selecting. This can be achieved using the role="radiogroup" and aria-label attributes.
• One of the chips may be selected by default but this is not required.

Multi-select

In this mode chips behave like checkboxes. Multiple chips can be selected.

This can be useful for adding filters to lists or when users may choose several items in a wizard.

For use in forms consider using a standard checkbox instead.

• Chips must always be presented in a set of at least two.
• When selected chips must have a checked icon.

Chips can be used to make selections, filter content. They can act like either checkbox or radio inputs.

They should usually be presented in a group of at least two, not by themselves.

The chip can be tabbed to and selected using the space bar.

Examples

Specifications

Properties

Events

Slots