Chips are a simplified version of the @react-md/button package that can be used to
represent input, attributes, or actions. Chips only have two themes by default:
"outline", but also have built-in support for rendering icons or
avatars to the left and right of the chip contents.
One use-case for chips is to be used for displaying filter behavior in a compact
form when checkboxes or dropdowns are not desired. A filter styled chip can be
created by setting the
selected prop to
true. The default
behavior will be to animate a check icon in and out of view while the selected
prop changes unless the
disableIconTransition prop is enabled.
To help out with accessibility, the chip will also be updated to match the
toggle button specs by
aria-pressed prop once the
selected prop is enabled.
Chips can also be used as simple action buttons. The example below will show the following behavior:
A chip can also be used as a radio group which is named a choice chip from the material design guidelines. These sorts of chips are great if you want to create a more condensed version of a radio group to display all choices to the user.
To create a choice chip, you'll provide a
selected prop just like for the
filter chips but also enable an
selectedThemed prop which will update the
selected state to use a swatch of the primary theme color.
Nulla convallis consectetur dictum. Nunc pellentesque ex eu nulla aliquet, eget posuere mi aliquam. Nam gravida nisl eleifend, faucibus mauris vitae, accumsan nulla.
Chips can also be used alongside text fields or autocompletes to help show selected values. This example will show an idea for how something like this might be implemented, but it's nowhere near perfect. The email field will allow for showing a list of contacts that create chips when clicked.
Chips can also be rendered as a
<span> enabling the
This is really just if you would like the styles of the chip without any of the