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

# Segmented - React Forms demo

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

- [Live demo](https://demo.mobiscroll.com/react/forms/segmented)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/form-components/forms/segmented)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-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), [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/react/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 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>
```

## Code

### JSX

```jsx
import { Page, Segmented, SegmentedGroup, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <Page>
      <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>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Page, Segmented, SegmentedGroup, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <Page>
    <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>
  </Page>
);
export default App;
```

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

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

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

## Related demos

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