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 →
Download and try example

Demo

Javascript jQuery Angular React Vue 
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Single select</div>
    <label>
        Day
        <input mbsc-segmented type="radio" name="range">
    </label>
    <label>
        Week
        <input mbsc-segmented type="radio" name="range">
    </label>
    <label>
        Month
        <input mbsc-segmented type="radio" name="range">
    </label>
    <label>
        Year
        <input mbsc-segmented type="radio" name="range" checked>
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Multiple select</div>
    <label>
        S
        <input mbsc-segmented type="checkbox" name="week" disabled>
    </label>
    <label>
        M
        <input mbsc-segmented type="checkbox" name="week" checked>
    </label>
    <label>
        T
        <input mbsc-segmented type="checkbox" name="week" >
    </label>
    <label>
        W
        <input mbsc-segmented type="checkbox" name="week" >
    </label>
    <label>
        T
        <input mbsc-segmented type="checkbox" name="week" checked>
    </label>
    <label>
        F
        <input mbsc-segmented type="checkbox" name="week" >
    </label>
    <label>
        S
    <input mbsc-segmented type="checkbox" name="week" disabled>
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Text and Icon</div>
    <label>
        Featured
        <input mbsc-segmented type="radio" data-icon="material-star" name="app" checked>
    </label>
    <label>
        Explore
        <input mbsc-segmented type="radio" data-icon="material-explore" name="app">
    </label>
    <label>
        Updates
        <input mbsc-segmented type="radio" data-icon="material-system-update" name="app">
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Icon</div>
    <label>
        <input mbsc-segmented type="radio" data-icon="fa-mail-reply" name="settings">
    </label>
    <label>
        <input mbsc-segmented type="radio" data-icon="fa-retweet" name="settings">
    </label>
    <label>
        <input mbsc-segmented type="radio" data-icon="star3" name="settings" checked>
    </label>
    <label>
        <input mbsc-segmented type="radio" data-icon="cogs" name="settings">
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Disabled</div>
    <label>
        Idividual
        <input mbsc-segmented type="radio" name="org" disabled checked>
    </label>
    <label>
        Team
        <input mbsc-segmented type="radio" name="org" disabled>
    </label>
    <label>
        Company
        <input mbsc-segmented type="radio" name="org" disabled>
    </label>
</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.