Material 3 Segmented Buttons in Jetpack Compose

Get started with Material 3 segmented buttons in Jetpack Compose to create user-friendly interfaces for selecting options.

Explore Segmented Button Styles

Learn to implement two Material 3 segmented button types for selecting options.

Single-select Segmented Button

Button for choosing one option.

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    // Creates a segmented button for selecting one option
    var selectedIndex by remember { mutableIntStateOf(0) } // Tracks selected button index
    val options = listOf("Day", "Month", "Week") // Defines button labels
    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ), // *Required: Sets button shape based on position
                onClick = { selectedIndex = index }, // *Required: Updates selection on click
                selected = index == selectedIndex, // *Required: Sets selection state
                label = { Text(label) } // *Required: Displays button label
            )
        }
    }
}
  

Use a Single-select Segmented Button when you want users to choose one option from a small set.

Examples:

• Choose a time filter in a calendar app
• Select a category in a news app
• Switch views in a dashboard

---

Multi-select Segmented Button

Button for choosing multiple options.

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    // Creates a segmented button for selecting multiple options
    val selectedOptions = remember { mutableStateListOf(false, false, false) } // Tracks selected states
    val options = listOf("Walk", "Ride", "Drive") // Defines button labels
    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ), // *Required: Sets button shape based on position
                checked = selectedOptions[index], // *Required: Sets checked state
                onCheckedChange = { selectedOptions[index] = !selectedOptions[index] }, // *Required: Toggles selection on click
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) }, // *Required: Displays selection icon
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector = Icons.AutoMirrored.Filled.DirectionsWalk, // Displays walk icon
                            contentDescription = "Directions Walk" // *Required: Describes icon for accessibility
                        )
                        "Ride" -> Icon(
                            imageVector = Icons.Default.DirectionsBus, // Displays bus icon
                            contentDescription = "Directions Bus" // *Required: Describes icon for accessibility
                        )
                        "Drive" -> Icon(
                            imageVector = Icons.Default.DirectionsCar, // Displays car icon
                            contentDescription = "Directions Car" // *Required: Describes icon for accessibility
                        )
                    }
                } // *Required: Displays button icon as label
            )
        }
    }
}
  

Use a Multi-select Segmented Button when you want users to choose multiple options from a small set.

Examples:

• Select travel modes in a map app
• Choose filters in a shopping app
• Pick preferences in a settings menu