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 className="mbsc-form-group">
    <div className="mbsc-form-group-title">Single select</div>
    <SegmentedGroup name="range">
        <Segmented value="day">Day</Segmented>
        <Segmented value="week">Week</Segmented>
        <Segmented value="month">Month</Segmented>
        <Segmented value="year" defaultChecked={true}>Year</Segmented>
    </SegmentedGroup>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Multiple select</div>
    <SegmentedGroup name="days" select="multiple">
        <Segmented value="sun" disabled>S</Segmented>
        <Segmented value="mon" defaultChecked={true}>M</Segmented>
        <Segmented value="tue">T</Segmented>
        <Segmented value="wed">W</Segmented>
        <Segmented value="thu" defaultChecked={true}>T</Segmented>
        <Segmented value="fri">F</Segmented>
        <Segmented value="sat" disabled>S</Segmented>
    </SegmentedGroup>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Text and icon</div>
    <SegmentedGroup name="app">
        <Segmented value="featured" icon="material-star" defaultChecked={true}>Featured</Segmented>
        <Segmented value="explore" icon="material-explore">Explore</Segmented>
        <Segmented value="updates" icon="material-system-update">Updates</Segmented>
    </SegmentedGroup>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Icon</div>
    <SegmentedGroup name="settings">
        <Segmented value="reply" icon="fa-mail-reply" />
        <Segmented value="retweet" icon="fa-retweet" />
        <Segmented value="favorite" icon="star3" defaultChecked={true} />
        <Segmented value="setting" icon="cogs" />
    </SegmentedGroup>
</div>
<div className="mbsc-form-group">
    <div className="mbsc-form-group-title">Disabled</div>
    <SegmentedGroup name="org" disabled>
        <Segmented value="individual" defaultChecked={true}>Idividual</Segmented>
        <Segmented value="team">Team</Segmented>
        <Segmented value="company">Company</Segmented>
    </SegmentedGroup>
</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.