General Date & Time pickers Event Calendar Form components Gesture enabled responsive list Numeric pickers Pickers & dropdowns Page layout & navigation Tools Accessibility

Segmented control

The segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.

With icon
<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1" icon="remove"></mbsc-segmented>
    <mbsc-segmented value="2" icon="pencil"></mbsc-segmented>
    <mbsc-segmented value="3" icon="plus"></mbsc-segmented>
</mbsc-segmented-group>
With text
<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1">Option 1</mbsc-segmented>
    <mbsc-segmented value="2">Option 2</mbsc-segmented>
    <mbsc-segmented value="3">Option 3</mbsc-segmented>
</mbsc-segmented-group>
With icon and text
<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1" icon="remove">Option 1</mbsc-segmented>
    <mbsc-segmented value="2" icon="pencil">Option 2</mbsc-segmented>
    <mbsc-segmented value="3" icon="plus">Option 3</mbsc-segmented>
</mbsc-segmented-group>

When selecting multiple items, the segmented control can be bound to an array, which values will be added or removed by the segmented selection.

Multiple selection with array
myGroupItems: Array<string> = ['Option 1', 'Option 2', 'Option 3']
<mbsc-segmented-group select="multiple" name="my-group" [(ngModel)]="myGroupItems">
    <mbsc-segmented [value]="item" *ngFor="let item of myGroupItems">{{item}}</mbsc-segmented>
</mbsc-segmented-group>

Passing the [(checked)] attribute, can specify the selected state of individual segmented items.

Individual items
myGroupItems: Array<{ text: string, selected: boolean }> = [{ text: 'Option 1', selected: true }, { text: 'Option 2', selected: false }]
<mbsc-segmented-group select="multiple" name="my-group">
    <mbsc-segmented [(checked)]="item.selected" *ngFor="let item of myGroupItems">{{item.text}}</mbsc-segmented>
</mbsc-segmented-group>

Using with Ionic

The Segmented component can be used tha same way with Ionic, as any other angular component.

Options

mbsc-segmented-group

Name Description
[(value)] Gets and sets the value of the segmented group when used without the [(ngModel)] directive.
[name] Sets the name of the segmented group. It will be generated, when not specified.
select Sets the selection type of the segmented group. Can be single or multiple, defaults to single.
color Sets the color preset of the segmented group. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

mbsc-segmented

Name Description
[disabled] If an item has the disabled attribute, it will be disabled.
icon Specify an icon for the segmented item. 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:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
[(value)] Value of the item. In single select mode, this value will be set to the model when clicked. In Multiselect mode, this value will be toggled, based on the selected state of this item.

Segmented theming

Global variables of the Segmented

Below you will find a list of SASS variables that affect the Segmented:

Variable name Description
$mbsc-form-background-light Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Segmented.
It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.
$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 along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-form-accent
#1273de
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups controls.

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 along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-dark-form-accent
#de7a13
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups controls.
iOS theme variables for the Segmented component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.
Windows theme variables for the Segmented component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups 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
#303030
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.
Material theme variables for the Segmented component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

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