Moxi Design System

# Chips

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

Filled
Basic Chip Removable Clickable Clickable, Selected & Removable Disabled
Outlined
Basic Chip Removable Clickable Clickable, Selected & Removable Disabled 
<div>
  <strong>Filled</strong>
  <div class="flex flex-wrap mb-8">
    <mx-chip class="m-8">
      Basic Chip
    </mx-chip>
    <mx-chip removable class="m-8">
      Removable
    </mx-chip>
    <mx-chip clickable class="m-8">
      Clickable
    </mx-chip>
    <mx-chip removable selected clickable class="m-8">
      Clickable, Selected &amp; Removable
    </mx-chip>
    <mx-chip clickable disabled removable avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" class="m-8">
      Disabled
    </mx-chip>
  </div>
  <strong>Outlined</strong>
  <div class="flex flex-wrap">
    <mx-chip outlined class="m-8">
      Basic Chip
    </mx-chip>
    <mx-chip outlined removable class="m-8">
      Removable
    </mx-chip>
    <mx-chip outlined clickable class="m-8">
      Clickable
    </mx-chip>
    <mx-chip outlined removable selected clickable class="m-8">
      Clickable, Selected &amp; Removable
    </mx-chip>
    <mx-chip outlined clickable disabled removable avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" class="m-8">
      Disabled
    </mx-chip>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Input Chips

Input Chips represent complex pieces of information.

Alaska Bilbo Baggins Frodo Baggins Biking Hotels
Alaska Bilbo Baggins Frodo Baggins Biking Hotels 
<div class="flex flex-wrap">
  <mx-chip removable class="m-8"> Alaska </mx-chip>
  <mx-chip
    avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
    class="m-8"
  >
    Bilbo Baggins
  </mx-chip>
  <mx-chip
    removable
    :selected="isFrodoSelected"
    clickable
    avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
    class="m-8"
    @click="isFrodoSelected = !isFrodoSelected"
  >
    Frodo Baggins
  </mx-chip>
  <mx-chip icon="ph ph-bicycle" class="m-8"> Biking </mx-chip>
  <mx-chip
    clickable
    :selected="isHotelsSelected"
    class="m-8"
    @click="isHotelsSelected = !isHotelsSelected"
  >
    Hotels
  </mx-chip>
</div>
<div class="flex flex-wrap">
  <mx-chip outlined removable class="m-8"> Alaska </mx-chip>
  <mx-chip
    outlined
    avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
    class="m-8"
  >
    Bilbo Baggins
  </mx-chip>
  <mx-chip
    outlined
    removable
    :selected="isFrodoSelected"
    clickable
    avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
    class="m-8"
    @click="isFrodoSelected = !isFrodoSelected"
  >
    Frodo Baggins
  </mx-chip>
  <mx-chip outlined icon="ph ph-bicycle" class="m-8"> Biking </mx-chip>
  <mx-chip
    outlined
    clickable
    :selected="isHotelsSelected"
    class="m-8"
    @click="isHotelsSelected = !isHotelsSelected"
  >
    Hotels
  </mx-chip>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# Choice Chips

Choice Chips are used to make a single selection from at least two options, much like a Radio Group or Toggle Button Group (opens new window).

To simplify the creation of Choice Chips, use the mx-chip-group component to wrap your mx-chip instances. The mx-chip-group accepts a value prop and emits an mxInput event in order to bind to your model.

Small Medium Large
Small Medium Large
<div class="flex flex-wrap m-8">
  <mx-chip-group :value="size" class="space-x-8" @mxInput="e => size = e.detail">
    <mx-chip value="small">Small</mx-chip>
    <mx-chip value="medium">Medium</mx-chip>
    <mx-chip value="large">Large</mx-chip>
  </mx-chip-group>
</div>
<div class="flex flex-wrap m-8">
  <mx-chip-group :value="size" class="space-x-8" @mxInput="e => size = e.detail">
    <mx-chip outlined value="small">Small</mx-chip>
    <mx-chip outlined value="medium">Medium</mx-chip>
    <mx-chip outlined value="large">Large</mx-chip>
  </mx-chip-group>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

# Filter Chips

Filter Chips are used to make multiple selections from a collection of filters, much like a Checkbox Group.

Action Comedy Drama Sci-Fi
Action Comedy Drama Sci-Fi 
<div class="flex flex-wrap">
  <mx-chip
    v-for="genre in genres"
    :key="genre"
    filter
    :selected="isGenreSelected(genre)"
    class="m-8"
    @click="toggleGenre(genre)"
  >
    {{ genre }}
  </mx-chip>
</div>
<div class="flex flex-wrap">
  <mx-chip
    v-for="genre in genres"
    :key="genre"
    outlined
    filter
    :selected="isGenreSelected(genre)"
    class="m-8"
    @click="toggleGenre(genre)"
  >
    {{ genre }}
  </mx-chip>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Action Chips

Action Chips trigger contextual actions much like Buttons.

Set alarm View profile Report issue
Set alarm View profile Report issue 
<div class="flex flex-wrap">
  <mx-chip clickable icon="ph ph-alarm" class="m-8">
    Set alarm
  </mx-chip>
  <mx-chip clickable avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" class="m-8">
    View profile
  </mx-chip>
  <mx-chip clickable icon="ph ph-bug" class="m-8">
    Report issue
  </mx-chip>
</div>
<div class="flex flex-wrap">
  <mx-chip clickable outlined icon="ph ph-alarm" class="m-8">
    Set alarm
  </mx-chip>
  <mx-chip clickable outlined avatar-url="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" class="m-8">
    View profile
  </mx-chip>
  <mx-chip clickable outlined icon="ph ph-bug" class="m-8">
    Report issue
  </mx-chip>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# mx-chip

# Properties

Property Attribute Description Type Default
avatarUrl avatar-url URL of image to show on the left string undefined
choice choice Style as a choice chip when selected. This is set internally when the chip is wrapped with an mx-chip-group. boolean false
clickable clickable Use the pointer cursor and show a ripple animation. This does not need to be explicitly set for choice or filter chips. boolean false
disabled disabled boolean false
filter filter Style as a filter chip when selected boolean false
icon icon Class name of icon to show on the left string undefined
outlined outlined boolean false
removable removable Show the remove icon on the right boolean false
selected selected Display a checkmark on the left side of the chip boolean false
value value The value associated with a choice chip (used with mx-chip-group) any undefined

# Events

Event Description Type
mxRemove Emitted when the remove icon is clicked CustomEvent<MouseEvent>

If you are having trouble setting a prop or adding an event listener, refer to this page.

# mx-chip-group

# Properties

Property Attribute Description Type Default
value value any undefined

# Events

Event Description Type
mxInput Emits the updated value as event.detail CustomEvent<any>

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Code Blocks →