---
title: "Javascript Forms Segmented Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/forms/segmented"
---

# Segmented - JavaScript Forms demo

Javascript segmented control with single & multiple select for radio buttons and checklists. It supports icons, text, colors. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/segmented)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/segmented)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/forms/segmented.md), [Angular](https://demo.mobiscroll.com/angular/forms/segmented.md), [React](https://demo.mobiscroll.com/react/forms/segmented.md), [Vue](https://demo.mobiscroll.com/vue/forms/segmented.md)

## Description

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 →](https://demo.mobiscroll.com/javascript/eventcalendar/create-read-update-delete-CRUD)

## What this demo shows

- This demo shows segmented controls configured for single and multiple selection from predefined options.
- **Segment content** Segments containing text, icons, or a combination of both.
- **Compact controls** Icon-only segments for space-efficient actions and selections.
- **Control states** Clear visual feedback for selected and unselected segments, along with a disabled segmented control.
- **Alternative input patterns** Segmented controls used as tabs and as compact alternatives to checklists, radio button groups, and select controls.

## Best for

- **Short option sets** Letting users choose one item from a small group, such as a display mode, status, or preference.
- **Compact multiple choice** Letting users select several options without the vertical space required by a checklist.
- **View switching** Presenting a small set of tab-like views or modes in a single inline control.
- **Icon-based actions** Providing recognizable actions or choices where horizontal space is limited.
- **Inline forms** Mixing concise choices with other fields in add and edit forms, including event forms.

## Tutorial

```html
<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>
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});
```

### HTML

```html
<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>
```

## Implementation notes

- Segments are grouped with `SegmentedGroup`/`mbsc-segmented-group`; JS/jQuery has no explicit group wrapper and instead relies on a shared `name` attribute across sibling `input[mbsc-segmented]` elements.
- `select="multiple"` on the group (React/Vue prop, Angular attribute) switches it from single-select (radio behavior) to multi-select (checkbox behavior); JS/jQuery achieves the same by giving each segment `type="checkbox"` instead of `type="radio"`.
- Individual segments carry a `value` in React/Angular/Vue to identify the selection; JS/jQuery segments have no `value` attribute and are read by their checked state directly.
- Initial selection is set per segment: React `defaultChecked={true}`, Angular `[checked]="true"`, Vue `:defaultChecked="true"`, JS/jQuery the plain `checked` attribute. Multiple segments can be checked at once only when the group is in `select="multiple"` mode.
- `icon` (`data-icon` in JS/jQuery) renders an icon inside a segment, either alongside label text or, when the segment has no text content, as an icon-only segment.
- `disabled` set on the group (React/Vue prop, Angular `disabled="true"` attribute, JS/jQuery a `disabled` attribute on every input in the group) disables all of its segments at once; the demo does not show disabling a single segment within an otherwise enabled group.
- The same `Segmented`/`SegmentedGroup` option set applies whether the control is used standalone, as tabs, or mixed inline with other form fields - usage context does not change the available options.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Buttons](https://demo.mobiscroll.com/javascript/forms/buttons.md) - Javascript button styling with full-width and justified layout along with icons, borderless/flat and outline rendering.
- Next: [Stepper](https://demo.mobiscroll.com/javascript/forms/stepper.md) - Javascript stepper example with fixed/custom steps and editable values.