Segmented Control

Overview

SegmentedControl is a Jetpack Compose component that displays a row of mutually exclusive options, allowing users to select one option from a set.
It includes the following features:

• Text-based and icon-based variants
• Single selection from multiple options
• Visual distinction between selected and unselected states
• Rounded corner styling with configurable radius
• Immutable list-based options for performance

API reference

SegmentedControl

A composable function that displays a text-based segmented control.

                                                        
                                                        
                                                            @Composable
                                                        fun SegmentedControl(    
                                                            options: ImmutableList<String>,    
                                                            selectedIndex: Int?,    
                                                            onOptionSelected: (index: Int) -> Unit,    
                                                            modifier: Modifier = Modifier
                                                        )
                                                        
                                                            

Parameters

IconSegmentedControl

A composable function that displays an icon-based segmented control.

                                                        
                                                        
                                                            @Composable
                                                        fun IconSegmentedControl(    
                                                            options: ImmutableList<Painter>,    
                                                            selectedIndex: Int?,    
                                                            onOptionSelected: (index: Int) -> Unit,    
                                                            modifier: Modifier = Modifier
                                                        )
                                                        
                                                            

Properties

SegmentedControlColorScheme

Internal class that defines the color scheme for the segmented control.

Properties

SegmentedControlLayout

Internal class that defines the layout properties.

Properties

Usage

Basic usage

Create a basic text segmented control.

                                                        
                                                        
                                                            import com.backbase.android.design.component.SegmentedControl
                                                        import kotlinx.collections.immutable.persistentListOf
                                                        
                                                        @Composablefun SegmentedControlExample() {    
                                                            var selectedIndex by remember { mutableStateOf<Int?>(0) }    
                                                            
                                                            SegmentedControl(        
                                                                options = persistentListOf("Day", "Week", "Month"),        
                                                                selectedIndex = selectedIndex,        
                                                                onOptionSelected = { index -> selectedIndex = index },    
                                                            )
                                                        }
                                                        
                                                            

Common use cases

Time period selection

                                                        
                                                        
                                                            var selectedPeriod by remember { mutableStateOf<Int?>(1) }
                                                        
                                                        SegmentedControl(    
                                                            options = persistentListOf("1D", "1W", "1M", "1Y", "All"),    
                                                            selectedIndex = selectedPeriod,    
                                                            onOptionSelected = { selectedPeriod = it },
                                                        )
                                                        
                                                            

Icon-based selection

Use icons instead of text for compact displays.

                                                        
                                                        
                                                            import com.backbase.android.design.theme.Icons
                                                        
                                                        var selectedView by remember { mutableStateOf<Int?>(0) }
                                                        
                                                        IconSegmentedControl(    
                                                            options = persistentListOf(        
                                                                Icons.Painter.iconList,        
                                                                Icons.Painter.iconGrid,        
                                                                Icons.Painter.iconMap    
                                                            ),    
                                                            selectedIndex = selectedView,    
                                                            onOptionSelected = { selectedView = it },
                                                        )
                                                        
                                                            

No initial selection

Start with no segment selected.

                                                        
                                                        
                                                            var selectedIndex by remember { mutableStateOf<Int?>(null) }
                                                        
                                                        SegmentedControl(    
                                                            options = persistentListOf("Option A", "Option B", "Option C"),    
                                                            selectedIndex = selectedIndex,    
                                                            onOptionSelected = { selectedIndex = it },
                                                        )
                                                        
                                                            

Category filter

                                                        
                                                        
                                                            var category by remember { mutableStateOf<Int?>(0) }
                                                        
                                                        SegmentedControl(    
                                                            options = persistentListOf("All", "Income", "Expenses"),    
                                                            selectedIndex = category,    
                                                            onOptionSelected = { category = it },
                                                        )
                                                        
                                                            

States and variants

Unselected state

Segment is not currently selected.
Visual characteristics:

• Background color from backgroundColor
• Border color from borderColor
• Content color from contentColor
• Tappable to select

Selected state

Segment is currently selected.
Visual characteristics:

• Background color from selectedBackgroundColor
• Border color from selectedBorderColor
• Content color from selectedContentColor
• Higher z-index for visual prominence
• Not tappable since already selected

Text variant

Uses text labels for each segment.
Visual characteristics:

• Single line text with ellipsis overflow
• Consistent text style across segments
• Equal width segments

Icon variant

Uses icon painters for each segment.
Visual characteristics:

• Icons centered in each segment
• Icons tinted based on selection state
• Equal width segments

Customization

Styling

The component uses SegmentedControlColorScheme for colors and SegmentedControlLayout for layout properties, accessed via composition locals.

Design tokens

The SegmentedControl component uses the following design tokens:

• backgroundColor: Unselected segment background
• borderColor: Unselected segment border
• contentColor: Unselected segment text/icon color
• selectedBackgroundColor: Selected segment background
• selectedBorderColor: Selected segment border
• selectedContentColor: Selected segment text/icon color
• cornerRadius: Rounded corner radius
• minHeight: Minimum segment height
• strokeWidth: Border stroke width
• textStyle: Typography for text labels

Accessibility

• Selected segment is not clickable, reducing accidental re-selection
• Icon variant should include content descriptions when needed
• Segments use standard clickable semantics
• Visual selection state is clearly distinguishable

Dependencies

• External dependencies:
• kotlinx.collections.immutable: For ImmutableList type
• Internal dependencies:
• LocalSegmentedControlColorScheme: Color scheme composition local
• LocalSegmentedControlLayout: Layout composition local