Moxi Design System

# Selection Controls

Selection controls consist of checkboxes, radios, and switches. Also see Toggle Buttons and Toggle Button Groups.

# Checkboxes

<div class="mds">
  <div class="my-12 grid grid-flow-row grid-cols-2 gap-4">
    <div><mx-checkbox name="foo" label-name="Premier" checked /></div>
    <div><mx-checkbox name="foo" label-name="W Collection" /></div>
    <div><mx-checkbox name="foo" label-name="Equestrian" /></div>
    <div><mx-checkbox name="foo" label-name="Darkness falls across the land, The midnight hour is close at hand" /></div>
    <div><mx-checkbox name="foo" disabled label-name="Disabled" /></div>
    <div><mx-checkbox name="foo" checked disabled label-name="Disabled" /></div>
    <div><mx-checkbox name="foo" indeterminate label-name="Indeterminate" /></div>
    <div><mx-checkbox name="foo" indeterminate disabled label-name="Indeterminate" /></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11

# mx-checkbox

# Properties

Property Attribute Description Type Default
checked checked boolean false
disabled disabled boolean false
elAriaLabel el-aria-label The aria-label attribute for the inner input element. string undefined
hideLabel hide-label Hide the label text visually, but still make it accessible for screen readers boolean false
indeterminate indeterminate boolean false
labelClass label-class string ''
labelLeft label-left Show the label to the left of the checkbox boolean false
labelName label-name The inner text for the label element string ''
name name string ''
userchecked userchecked boolean false
value value string ''

# Dependencies

# Used by

# Graph

graph TD;
  mx-menu-item --> mx-checkbox
  mx-table --> mx-checkbox
  mx-table-row --> mx-checkbox
  style mx-checkbox fill:#f9f,stroke:#333,stroke-width:4px
1
2
3
4
5

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

# Radio Buttons

<div class="mds">
  <div class="my-12 grid grid-flow-row grid-cols-2 gap-4">
    <div><mx-radio name="foo" label-name="Premier" /></div>
    <div><mx-radio name="foo" label-name="W Collection" /></div>
    <div><mx-radio name="foo" label-name="Equestrian" /></div>
    <div><mx-radio name="foo" label-name="Darkness falls across the land, The midnight hour is close at hand" /></div>
    <div><mx-radio name="foo" disabled label-name="Disabled" /></div>
    <div><mx-radio name="foo" disabled checked label-name="Disabled" /></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9

# mx-radio

# Properties

Property Attribute Description Type Default
checked checked boolean false
disabled disabled boolean false
labelClass label-class string ''
labelName label-name The inner text for the label element string ''
name name string ''
userchecked userchecked boolean false
value value string ''

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

# Switches

<div class="mds">
  <div class="my-12 grid grid-flow-row grid-cols-2 gap-4">
    <div><mx-switch name="foo" label-name="Premier" /></div>
    <div><mx-switch name="foo" label-name="W Collection" /></div>
    <div><mx-switch name="foo" label-name="Equestrian" /></div>
    <div><mx-switch name="foo" label-name="Darkness falls across the land, The midnight hour is close at hand" /></div>
    <div><mx-switch name="foo" disabled label-name="Disabled" /></div>
    <div><mx-switch name="foo" disabled checked label-name="Disabled" /></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9

# mx-switch

# Properties

Property Attribute Description Type Default
checked checked boolean false
disabled disabled boolean false
labelClass label-class string ''
labelName label-name The inner text for the label element string ''
name name string ''
userchecked userchecked boolean false
value value string ''

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

← Snackbars →