Chip | M&T Exchange

Variants

Lorem Ipsum

Input Chip

Input chips represent user-entered or selected information. They appear inline within a text input. Input chips use the primary green treatment and do not change appearance. They are always dismissible.

Choose an option:

Option 1

Option 2

Option 3

Choice Chip

Choice chips allow the user to select one option out of a group of many, similar to radios or button groups . Like all inputs, choice chips should always appear with a label. Choice chips are initially displayed in the deselected gray state. Once selected, the chip will change to its green selected state and cannot be deselected unless another chip is selected.

<label class="c-label l-margin-bottom--medium">
  Choose an option:
</label>
<div class="c-chip__container">
  <div class="c-chip c-chip--active">Option 1</div>
  <div class="c-chip">Option 2</div>
  <div class="c-chip">Option 3</div>
</div>

Copy