Available from v1.7.0
Segmented Control
SegmentedControl is a horizontal control that consists of a maximum of 5 segments, each segment functioning as a discrete button.
Platform availability: iOS 17.0+
When to use:
- Use SegmentedControl when users need to switch between mutually exclusive views or filter options within the same context.
- Consider using TabHeaderViewController for page-level navigation, or ChipView for non-exclusive filtering.
Features:
- Support for text, images, or mixed content segments.
- Maximum of 5 segments.
- Customizable selection colors and fonts.
- Selection change callback.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
|
API reference
SegmentedControl
A UISegmentedControl subclass with design system styling.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
selectedSegmentIndex |
Int |
The selectedSegmentIndex of the currently selected segment. |
|
isMomentary |
Bool |
The isMomentary mode where segments deselect automatically. |
|
selectionDidChange |
((Int) -> Void)? |
The selectionDidChange callback when segment selection changes. |
Initializers
- init(items:style:) Initializes a SegmentedControl with the given items and style.
|
Parameter |
Type |
Description |
|---|---|---|
|
items |
[Any] |
Array of segment items (strings or images). Maximum 5 items. |
|
style |
Style<SegmentedControl> |
A style block for styling. Defaults to DesignSystem.shared.styles.segmentedControl. |
Methods
setTextColor(_:for:) Sets the text color for a specific state.
|
Parameter |
Type |
Description |
|---|---|---|
|
color |
UIColor |
The color to apply. |
|
state |
UIControl.State |
The state for which to apply the color. |
setFont(_:for:) Sets the font for a specific state.
|
Parameter |
Type |
Description |
|---|---|---|
|
font |
UIFont |
The font to apply. |
|
state |
UIControl.State |
The state for which to apply the font. |
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
items |
[Any] |
Required |
|
style |
Style<SegmentedControl> |
DesignSystem.shared.styles.segmentedControl |
items
The items parameter defines the segments to display. Accepts an array of strings, images, or mixed content. Maximum of 5 items.
// Text items
let control = SegmentedControl(items: ["First", "Second", "Third"])
// Mixed content items
let items: [Any] = ["Text", UIImage(systemName: "star")!, "Another"]
let control = SegmentedControl(items: items)
style
The style parameter applies visual styling to the segmented control using a Style closure.
let customStyle: Style<SegmentedControl> = { control in
control.selectedSegmentTintColor = UIColor.systemBlue
}
let control = SegmentedControl(items: ["A", "B"], style: customStyle)
Usage
Basic usage
Create a SegmentedControl instance with an array of items:
let basicSegmentedControl: SegmentedControl = {
let control = SegmentedControl(items: ["First", "Second", "Third"])
return control
}()
Advanced usage
Create a segmented control with mixed content and custom styling:
let advancedSegmentedControl: SegmentedControl = {
let image = UIImage(systemName: "star.fill")!
let items: [Any] = ["Text", image, "Another"]
let customStyle: Style<SegmentedControl> = { control in
control.selectedSegmentTintColor = UIColor.systemBlue
control.setTextColor(.white, for: .selected)
control.setFont(UIFont.preferredFont(forTextStyle: .headline), for: .selected)
}
let control = SegmentedControl(items: items, style: customStyle)
control.selectionDidChange = { selectedIndex in
print("Selected segment: \(selectedIndex)")
}
return control
}()
Selection handling
Respond to selection changes:
segmentedControl.selectionDidChange = { selectedIndex in
switch selectedIndex {
case 0:
print("First segment selected")
case 1:
print("Second segment selected")
default:
print("Other segment selected: \(selectedIndex)")
}
}
States and variants
Selection states
|
State |
Property |
Description |
|---|---|---|
|
Selected |
selectedSegmentIndex |
The currently selected segment index |
|
No Selection |
UISegmentedControl.noSegment |
No segment is selected |
|
Momentary |
isMomentary = true |
Segment deselects automatically after tap |
// Set initial selection
segmentedControl.selectedSegmentIndex = 1
// Enable momentary selection (deselects automatically)
segmentedControl.isMomentary = true
// Disable selection (no segment selected)
segmentedControl.selectedSegmentIndex = UISegmentedControl.noSegment
Content types
|
Type |
Description |
|---|---|
|
Text |
String labels for each segment |
|
Image |
UIImage icons for each segment |
|
Mixed |
Combination of text and images |
// Text-only segments
let textControl = SegmentedControl(items: ["Text", "Only", "Segments"])
// Image-only segments
let image1 = UIImage(systemName: "star")!
let image2 = UIImage(systemName: "heart")!
let imageControl = SegmentedControl(items: [image1, image2])
// Mixed content segments
let mixedItems: [Any] = ["Text", UIImage(systemName: "gear")!, "More Text"]
let mixedControl = SegmentedControl(items: mixedItems)
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.segmentedControl |
Default segmented control style. |
Custom styling
Create custom styles by defining a Style closure:
let customStyle: Style<SegmentedControl> = { control in
control.selectedSegmentTintColor = UIColor.systemRed
control.setTextColor(.black, for: .normal)
control.setTextColor(.white, for: .selected)
control.selectedSegmentIndex = 0
}
let styledControl = SegmentedControl(items: ["Custom", "Styled"], style: customStyle)
Events
|
Event |
Type |
Description |
|---|---|---|
|
selectionDidChange |
((Int) -> Void)? |
Called when segment selection changes. |
Accessibility
The SegmentedControl uses standard UIKit accessibility behavior.
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
accessibilityLabel |
Descriptive label for screen readers |
String? |
|
accessibilityHint |
Hint describing the result of interaction |
String? |
Best practices
- Segment titles are automatically accessible to screen readers
- Selection changes are communicated through accessibility updates
- Use meaningful segment titles that describe each option
let control = SegmentedControl(items: ["Option 1", "Option 2"])
control.accessibilityLabel = "Selection options"
control.accessibilityHint = "Choose one of the available options"
Dependencies
- External dependencies: None
- Internal dependencies: None
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Typography |
DesignSystem.shared.fonts.preferredFont(.footnote, .regular) |
Normal state font |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.footnote, .medium) |
Selected state font |
|
Styles |
DesignSystem.shared.styles.segmentedControl |
Default segmented control style |
See also
- TabHeaderViewController - Page-level tab navigation
- ChipView - Filter chip component