# MultiChoiceSegmentedButtonRowScope

Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/SegmentedButton.kt+class:androidx.compose.material3.MultiChoiceSegmentedButtonRowScope) Common/AllAndroid/JVM
- Cmn

  ```
  interface MultiChoiceSegmentedButtonRowScope : RowScope
  ```

*** ** * ** ***

Scope for the children of a `https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRow.composable#MultiChoiceSegmentedButtonRow(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,kotlin.Function1)`

## Summary

| ### Extension functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRowScope.https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRowScope#(androidx.compose.material3.MultiChoiceSegmentedButtonRowScope).SegmentedButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SegmentedButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.Function0)( checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SegmentedButtonColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design segmented Button](https://m3.material.io/components/segmented-buttons/overview) | Cmn |

### Inherited functions

From [androidx.compose.foundation.layout.RowScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope) `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Vertical)(alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical)`

Align the element vertically within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1)(alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)`

Position the element vertically such that the alignment line for the content as determined by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1)` aligns with sibling elements also configured to `alignBy`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/HorizontalAlignmentLine)`

Position the element vertically such that its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` aligns with sibling elements also configured to `alignBy`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline()()`

Position the element vertically such that its first baseline aligns with sibling elements also configured to `alignByBaseline` or `alignBy`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)(
weight: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, fromInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html,
fill: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html
)`

Size the element's width proportional to its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)` relative to other weighted sibling elements in the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`.
Cmn

## Extension functions

### MultiChoiceSegmentedButtonRowScope.SegmentedButton

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/SegmentedButton.kt+function:SegmentedButton)

```
@Composable
fun MultiChoiceSegmentedButtonRowScope.SegmentedButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shape: Shape,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(),
    border: BorderStroke = SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, checked)),
    contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) },
    label: @Composable () -> Unit
): Unit
```

[Material Design segmented Button](https://m3.material.io/components/segmented-buttons/overview)

Segmented buttons help people select options, switch views, or sort elements.

A default Toggleable Segmented Button. Also known as Outlined Segmented Button. See `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`.

Toggleable segmented buttons should be used for cases where the selection is not mutually exclusive.

This should typically be used inside of a `https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRow.composable#MultiChoiceSegmentedButtonRow(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,kotlin.Function1)`

For a sample showing Segmented button with only checked icons see:

```kotlin
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.TrendingUp
import androidx.compose.material.icons.filled.BookmarkBorder
import androidx.compose.material.icons.filled.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

val checkedList = rememberSaveable { mutableStateListOf<Int>() }
val options = listOf("Favorites", "Trending", "Saved")
val icons =
    listOf(
        Icons.Filled.StarBorder,
        Icons.AutoMirrored.Filled.TrendingUp,
        Icons.Filled.BookmarkBorder,
    )
MultiChoiceSegmentedButtonRow {
    options.forEachIndexed { index, label ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            icon = {
                SegmentedButtonDefaults.Icon(active = index in checkedList) {
                    Icon(
                        imageVector = icons[index],
                        contentDescription = null,
                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize),
                    )
                }
            },
            onCheckedChange = {
                if (index in checkedList) {
                    checkedList.remove(index)
                } else {
                    checkedList.add(index)
                }
            },
            checked = index in checkedList,
        ) {
            Text(label)
        }
    }
}
```

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this button is checked or not |
| `onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be invoked when the button is clicked. therefore the change of checked state in requested. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | the shape for this button |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this button |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SegmentedButtonColors = SegmentedButtonDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SegmentedButtonColors` that will be used to resolve the colors used for this |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke = SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, checked))` | the border for this button, see `https://developer.android.com/reference/kotlin/androidx/compose/material3/SegmentedButtonColors` Button in different states |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = SegmentedButtonDefaults.ContentPadding` | the spacing values to apply internally between the container and the \* content |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| `icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SegmentedButtonDefaults.Icon(checked) }` | the icon slot for this button, you can pass null in unchecked, in which case the content will displace to show the checked icon, or pass different icon lambdas for unchecked and checked in which case the icons will crossfade. |
| `label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | content to be rendered inside this button |