Segmented control
The segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.
Inputs with type="radio"
and mbsc-segmented
will be transformed into a segmented control.
Just like radio buttons, the segments are grouped by the name
attribute of the input.
<mobiscroll.SegmentedGroup name="icononly">
<mobiscroll.Segmented value="1" icon="remove"></mobiscroll.Segmented>
<mobiscroll.Segmented value="2" icon="pencil"></mobiscroll.Segmented>
<mobiscroll.Segmented value="3" icon="plus"></mobiscroll.Segmented>
</mobiscroll.SegmentedGroup>
<mobiscroll.SegmentedGroup name="settings">
<mobiscroll.Segmented value="1" startIcon="remove">Delete</mobiscroll.Segmented>
<mobiscroll.Segmented value="2" startIcon="pencil">Edit</mobiscroll.Segmented>
<mobiscroll.Segmented value="3" startIcon="plus">Add</mobiscroll.Segmented>
</mobiscroll.SegmentedGroup>
<mobiscroll.SegmentedGroup name="uncontrolled">
<mobiscroll.Segmented value="day" defaultChecked={true}>
Day
</mobiscroll.Segmented>
<mobiscroll.Segmented value="week">
Week
</mobiscroll.Segmented>
<mobiscroll.Segmented value="month">
Month
</mobiscroll.Segmented>
<mobiscroll.Segmented value="year">
Year
</mobiscroll.Segmented>
</mobiscroll.SegmentedGroup>
<mobiscroll.SegmentedGroup name="controlled" value={this.state.range} onChange={this.setRange}>
<mobiscroll.Segmented value="day">
Day
</mobiscroll.Segmented>
<mobiscroll.Segmented value="week">
Week
</mobiscroll.Segmented>
<mobiscroll.Segmented value="month">
Month
</mobiscroll.Segmented>
<mobiscroll.Segmented value="year">
Year
</mobiscroll.Segmented>
</mobiscroll.SegmentedGroup>
<mobiscroll.SegmentedGroup select="multiple">
<mobiscroll.Segmented value="one" checked={this.state.nr} onChange={this.setSegmented}>
One
</mobiscroll.Segmented>
<mobiscroll.Segmented value="two" checked={this.state.nr} onChange={this.setSegmented}>
Two
</mobiscroll.Segmented>
<mobiscroll.Segmented value="three" checked={this.state.nr} onChange={this.setSegmented}>
Three
</mobiscroll.Segmented>
</mobiscroll.SegmentedGroup>
mobiscroll.SegmentedGroup
mobiscroll.Segmented
Prop | Type | Description |
---|---|---|
checked | PropTypes.bool | Sets the segmented control checked state. |
color | PropTypes.string | Specify the color preset of the segmented control. Can be one of "primary", "secondary", "success", "danger", "warning" and "info". |
disabled | PropTypes.bool | Disables the segmented control when true. |
endIcon | PropTypes.string | Specifies the end icon for a button with icon and text. A font-icon name should be passed. |
endIconSrc | PropTypes.string | Specifies the end icon for a button with icon and text. The path of the icon should be passed. |
endIconSvg | PropTypes.string | Specifies the end icon for a button with icon and text. The svg should be passed. |
icon | PropTypes.string |
Specify icon for the segmented control. A font-icon name should be passed.
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-icon mbsc-icon-{iconName} classes, e.g.:
|
iconSrc | PropTypes.string | Specifies the icon for an icon-only button. The path of the icon should be passed. |
iconSvg | PropTypes.string | Specifies the icon for an icon-only button. The svg should be passed. |
name | PropTypes.string | Specify name attribute for the segmented control. It will be generated, when not specified. |
startIcon | PropTypes.string | Specifies the start icon for a button with icon and text. A font-icon name should be passed. |
startIconSrc | PropTypes.string | Specifies the start icon for a button with icon and text. The path of the icon should be passed. |
startIconSvg | PropTypes.string | Specifies the start icon for a button with icon and text. The svg should be passed. |
For many more examples - simple and complex use-cases - check out the segmented demos for react.
Segmented theming
Variable name | Description |
---|---|
$mbsc-form-background-light | Affects the background color of the Segmented control. |
$mbsc-form-background-dark | |
$mbsc-form-text-light | Affects the label color of the Segmented. |
$mbsc-form-text-dark | |
$mbsc-form-accent-light | Affects the accent color of the Segmented control. |
$mbsc-form-accent-dark |
If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:
iOS theme
The following variables are specific to the iOS theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-ios-form-background | #ffffff | Affects the background color of the Segmented. |
$mbsc-ios-form-text | #000000 | Affects the label color of the Segmented. |
$mbsc-ios-form-accent | #1273de | Affects the accent color of the Segmented control. |
iOS Dark theme
The following variables are specific to the iOS theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-ios-dark-form-background | #0f0f0f | Affects the background color of the Segmented. |
$mbsc-ios-dark-form-text | #ffffff | Affects the label color of the Segmented. |
$mbsc-ios-dark-form-accent | #de7a13 | Affects the accent color of the Segmented control. |

Windows theme
The following variables are specific to the Windows theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-windows-form-background | #cccccc | Affects the background color of the Segmented. |
$mbsc-windows-form-text | #333333 | Affects the label color of the Segmented. |
$mbsc-windows-form-accent | #0078d7 | Affects the accent color of the Segmented control. |
Windows Dark theme
The following variables are specific to the Windows theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-windows-dark-form-background | #404040 | Affects the background color of the Segmented. |
$mbsc-windows-dark-form-text | #ffffff | Affects the label color of the Segmented. |
$mbsc-windows-dark-form-accent | #0078d7 | Affects the accent color of the Segmented control. |

Material theme
The following variables are specific to the Material theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-material-form-background | transparent | Affects the background color of the Segmented. |
$mbsc-material-form-text | #000000 | Affects the label color of the Segmented. |
$mbsc-material-form-accent | #1a73e8 | Affects the accent color of the Segmented controls. |
Material Dark theme
The following variables are specific to the Material theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-material-dark-form-background | transparent | Affects the background color of the Segmented. |
$mbsc-material-dark-form-text | #ffffff | Affects the label color of the Segmented. |
$mbsc-material-dark-form-accent | #87b0f3 | Affects the accent color of the Segmented control. |

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.