Segmented

Use the segmented control to render multiple-choice lists with single or multiple select. Use it as tabs, as a compact multi-choice UI instead of a checklist and even as an alternative to a radio buttons or a select.

Break the monotony of event add/edit forms by mixing it in with other inline fields.

Interested in add/edit screens for events?  Check out how the segmented can be used in an event form →
Get started with this example

Demo

Javascript jQuery Angular React Vue 
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Single select</div>
  <MbscSegmentedGroup name="range">
    <MbscSegmented value="day">Day</MbscSegmented>
    <MbscSegmented value="week">Week</MbscSegmented>
    <MbscSegmented value="month">Month</MbscSegmented>
    <MbscSegmented value="year" :defaultChecked="true">Year</MbscSegmented>
  </MbscSegmentedGroup>
</div>
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Multiple select</div>
  <MbscSegmentedGroup name="days" select="multiple">
    <MbscSegmented value="sun" disabled>S</MbscSegmented>
    <MbscSegmented value="mon" :defaultChecked="true">M</MbscSegmented>
    <MbscSegmented value="tue">T</MbscSegmented>
    <MbscSegmented value="wed">W</MbscSegmented>
    <MbscSegmented value="thu" :defaultChecked="true">T</MbscSegmented>
    <MbscSegmented value="fri">F</MbscSegmented>
    <MbscSegmented value="sat" disabled>S</MbscSegmented>
  </MbscSegmentedGroup>
</div>
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Text and icon</div>
  <MbscSegmentedGroup name="app">
    <MbscSegmented value="featured" icon="material-star" :defaultChecked="true">Featured</MbscSegmented>
    <MbscSegmented value="explore" icon="material-explore">Explore</MbscSegmented>
    <MbscSegmented value="updates" icon="material-system-update">Updates</MbscSegmented>
  </MbscSegmentedGroup>
</div>
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Icon</div>
  <MbscSegmentedGroup name="settings">
    <MbscSegmented value="reply" icon="fa-mail-reply" />
    <MbscSegmented value="retweet" icon="fa-retweet" />
    <MbscSegmented value="favorite" icon="star3" :defaultChecked="true" />
    <MbscSegmented value="setting" icon="cogs" />
  </MbscSegmentedGroup>
</div>
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Disabled</div>
  <MbscSegmentedGroup name="org" disabled>
    <MbscSegmented value="individual" :defaultChecked="true">Idividual</MbscSegmented>
    <MbscSegmented value="team">Team</MbscSegmented>
    <MbscSegmented value="company">Company</MbscSegmented>
  </MbscSegmentedGroup>
</div>
Single select
Multiple select
Text and Icon
Icon
Disabled
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.