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" startIcon="remove">Option 1</mbsc-segmented>
    <mbsc-segmented value="2" startIcon="pencil">Option 2</mbsc-segmented>
    <mbsc-segmented value="3" startIcon="plus">Option 3</mbsc-segmented>
</mbsc-segmented-group>
Segmented individual ngModel
<mbsc-segmented-group name="individual">
    <mbsc-segmented value="day" [(ngModel)]="range">Day</mbsc-segmented>
    <mbsc-segmented value="week" [(ngModel)]="range">Week</mbsc-segmented>
    <mbsc-segmented value="month" [(ngModel)]="range">Month</mbsc-segmented>
    <mbsc-segmented value="year" [(ngModel)]="range">Year</mbsc-segmented>
</mbsc-segmented-group>
Segmented ngModel
<mbsc-segmented-group name="ngmodel" [(ngModel)]="range">
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month">Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>
Segmented value binding
<mbsc-segmented-group name="binding" [(value)]="range">
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month">Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>
Segmented uncontrolled
<mbsc-segmented-group name="uncontrolled">
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month" checked>Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>
Multiple selection
myGroupItems: Array<{ checked: boolean, text: string, value: string }> = [
    { checked: false, text: 'S', value: 'sunday' }, 
    { checked: true, text: 'M', value: 'monday' }, 
    { checked: false, text: 'T', value: 'tuesday' },
    { checked: false, text: 'W', value: 'wednesday' },
    { checked: true, text: 'T', value: 'thursday' },
    { checked: false, text: 'F', value: 'friday' },
    { checked: false, text: 'S',value: 'saturday' }
]
<mbsc-segmented-group select="multiple" name="multi">
    <mbsc-segmented *ngFor="let item of myGroupItems" [(value)]="item.value" [(checked)]="item.checked">{{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
disabled If a segmented group has the disabled attribute, it will be disabled.
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
checked If an item has the checked attribute, it will be checked.
disabled If an item has the disabled attribute, it will be disabled.
endIcon Specifies the end icon for a button with icon and text. A font-icon name should be passed.
endIconSrc Specifies the end icon for a button with icon and text. The path of the icon should be passed.
endIconSvg Specifies the end icon for a button with icon and text. The svg should be passed.
icon Specifies the icon for an icon-only button. 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-icon mbsc-icon-{iconName} classes, e.g.:
<div class="mbsc-icon mbsc-icon-star"></div>
iconSrc Specifies the icon for an icon-only button. The path of the icon should be passed.
iconSvg Specifies the icon for an icon-only button. The svg should be passed.
startIcon Specifies the start icon for a button with icon and text. A font-icon name should be passed.
startIconSrc Specifies the start icon for a button with icon and text. The path of the icon should be passed.
startIconSvg Specifies the start icon for a button with icon and text. The svg should be passed.
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.

For many more examples - simple and complex use-cases - check out the segmented demos for angular.

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.
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
#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.
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 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.
Material theme variables for the Segmented component

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