---
title: "PickerGroup"
description: "A group of `Picker`s to build components where multiple pickers are required to be combined
together. At most one `Picker` can be selected at a time. When touch exploration services are
enabled, the focus moves to the picker which is clicked."
type: "component"
---

<div class='type'>Composable Component</div>



A group of `Picker`s to build components where multiple pickers are required to be combined
together. At most one `Picker` can be selected at a time. When touch exploration services are
enabled, the focus moves to the picker which is clicked.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun PickerGroup(
    modifier: Modifier = Modifier,
    selectedPickerState: PickerState? = null,
    autoCenter: Boolean = true,
    propagateMinConstraints: Boolean = false,
    content: @Composable PickerGroupScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| selectedPickerState | The `PickerState` of the `Picker` that is selected. Null value means that no `Picker` is selected. |
| modifier | `Modifier` to be applied to the `PickerGroup`. |
| autoCenter | Indicates whether the selected `Picker` should be centered on the screen. It is recommended to set this as true when all the pickers cannot be fit into the screen. Or provide a mechanism to navigate to pickers which are not visible on screen. If false, the whole row containing pickers would be centered. |
| propagateMinConstraints | Whether the incoming min constraints should be passed to content. |
| content | The content of the `PickerGroup` as a container of `Picker`s. |






## Code Examples
### AutoCenteringPickerGroup
```kotlin
@Composable
fun AutoCenteringPickerGroup() {
    var selectedPickerIndex by remember { mutableIntStateOf(0) }
    val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
    val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
    val pickerStateSeconds = rememberPickerState(initialNumberOfOptions = 60)
    val pickerStateMilliSeconds = rememberPickerState(initialNumberOfOptions = 1000)
    val pickerStates = remember {
        arrayOf(pickerStateHour, pickerStateMinute, pickerStateSeconds, pickerStateMilliSeconds)
    }
    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        val headingText = mapOf(0 to "Hours", 1 to "Minutes", 2 to "Seconds", 3 to "Milli")
        Spacer(modifier = Modifier.size(30.dp))
        AnimatedContent(targetState = headingText[selectedPickerIndex]!!) { targetText ->
            Text(text = targetText)
        }
        Spacer(modifier = Modifier.size(10.dp))
        PickerGroup(selectedPickerState = pickerStates[selectedPickerIndex], autoCenter = true) {
            PickerGroupItem(
                pickerState = pickerStateHour,
                selected = selectedPickerIndex == 0,
                onSelected = { selectedPickerIndex = 0 },
                option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
                contentDescription = { "Hours" },
                modifier = Modifier.size(80.dp, 100.dp),
            )
            PickerGroupItem(
                pickerState = pickerStateMinute,
                selected = selectedPickerIndex == 1,
                onSelected = { selectedPickerIndex = 1 },
                option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
                contentDescription = { "Minutes" },
                modifier = Modifier.size(80.dp, 100.dp),
            )
            PickerGroupItem(
                pickerState = pickerStateSeconds,
                selected = selectedPickerIndex == 2,
                onSelected = { selectedPickerIndex = 2 },
                option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
                contentDescription = { "Seconds" },
                modifier = Modifier.size(80.dp, 100.dp),
            )
            PickerGroupItem(
                pickerState = pickerStateMilliSeconds,
                selected = selectedPickerIndex == 3,
                onSelected = { selectedPickerIndex = 3 },
                option = { optionIndex, _ -> Text(text = "%03d".format(optionIndex)) },
                contentDescription = { "Milliseconds" },
                modifier = Modifier.size(80.dp, 100.dp),
            )
        }
    }
}
```
### PickerGroupSample
```kotlin
@Composable
fun PickerGroupSample() {
    var selectedPickerIndex by remember { mutableIntStateOf(0) }
    val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
    val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Spacer(modifier = Modifier.size(30.dp))
        val label = if (selectedPickerIndex == 0) "Hours" else "Minutes"
        AnimatedContent(targetState = label) { targetText -> Text(text = targetText) }
        Spacer(modifier = Modifier.size(10.dp))
        PickerGroup(
            selectedPickerState =
                if (selectedPickerIndex == 0) pickerStateHour else pickerStateMinute,
            autoCenter = false,
        ) {
            PickerGroupItem(
                pickerState = pickerStateHour,
                selected = selectedPickerIndex == 0,
                onSelected = { selectedPickerIndex = 0 },
                option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
                contentDescription = { "Hours" },
                modifier = Modifier.size(80.dp, 100.dp),
            )
            PickerGroupItem(
                pickerState = pickerStateMinute,
                selected = selectedPickerIndex == 1,
                onSelected = { selectedPickerIndex = 1 },
                option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
                contentDescription = { "Minutes" },
                modifier = Modifier.size(80.dp, 100.dp),
            )
        }
    }
}
```