---
title: "Vue Forms Segmented Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/forms/segmented"
---

# Segmented - Vue Forms demo

Vue segmented control with single & multiple select for radio buttons and checklists. It supports icons, text, colors. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/forms/segmented)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/form-components/forms/segmented)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/form-components/forms/segmented)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/segmented.md), [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)

## 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/vue/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

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

## Code

### SFC JS

```vue
<script setup>
import {
  MbscPage,
  MbscSegmented,
  MbscSegmentedGroup,
  setOptions
} from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <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>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscPage,
  MbscSegmented,
  MbscSegmentedGroup,
  setOptions
} from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <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>
  </MbscPage>
</template>
```

## 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-vue.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 vue
   ```

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 vue --trial`.

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

## Related demos

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