Radio Group¶

A foundational component used to create accessible radio groups in Compose Multiplatform.

Comes with full accessibility features and keyboard navigation, while letting you handle the styling to your liking.

Installation¶

build.gradle.kts

dependencies {
    implementation("com.composables:core:1.25.0")
}

Basic Example¶

To create a radio group use the RadioGroup component. Each radio option should be represented using the Radio component.

The radio group handles its own state and sets important accessibility semantics.

You are free to represent a radio as anything you like, such as a checkbox icon or a typical radio like the following example:

val values = listOf("Light", "Dark", "System")
val groupState = rememberRadioGroupState(initialValue = values[0])

RadioGroup(
    state = groupState,
    contentDescription = "Theme selection"
) {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        values.forEach { text ->
            val selected = groupState.selectedOption == text
            Radio(
                value = text,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth(),
                contentPadding = PaddingValues(vertical = 12.dp, horizontal = 16.dp),
                shape = RoundedCornerShape(8.dp),
            ) {
                Box(
                    modifier = Modifier
                        .size(20.dp)
                        .shadow(elevation = 4.dp, RoundedCornerShape(8.dp))
                        .clip(CircleShape)
                        .background(
                            if (selected) Color(0xFFB23A48) else Color.White
                        ),
                    contentAlignment = Alignment.Center
                ) {
                    Box(
                        Modifier
                            .size(8.dp)
                            .clip(CircleShape)
                            .alpha(if (selected) 1f else 0f)
                            .background(Color.White)
                    )
                }
                Spacer(Modifier.width(16.dp))
                Text(text)
            }
        }
    }
}

Styling¶

Every component in Compose Unstyled is renderless. They handle all UX pattern logic, internal state, accessibility ( according to ARIA standards), and keyboard interactions for you, but they do not render any UI to the screen.

This is by design so that you can style your components exactly to your needs.

Most of the time, styling is done using Modifiers of your choice. However, sometimes this is not enough due to the order of the Modifiers affecting the visual outcome.

For such cases we provide specific styling parameters.

Code Example¶

Toggle radio manually¶

You can control selection yourself by using the Radio overload with the selected/onSelectedChange params.

RadioGroup(
    state = groupState,
    contentDescription = "Theme selection"
) {
    Column(
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        values.forEach { text ->
            val selected = groupState.selectedOption == text
            Radio(
                selected = groupState.selectedOption == text,
                onSelectedChange = { groupState.selectedOption = text },
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth(),
                contentPadding = PaddingValues(vertical = 12.dp, horizontal = 16.dp),
                shape = RoundedCornerShape(8.dp),
            ) {
                Box(
                    modifier = Modifier
                        .size(20.dp)
                        .shadow(elevation = 4.dp, RoundedCornerShape(8.dp))
                        .clip(CircleShape)
                        .background(
                            if (selected) Color(0xFFB23A48) else Color.White
                        ),
                    contentAlignment = Alignment.Center
                ) {
                    Box(
                        Modifier
                            .size(8.dp)
                            .clip(CircleShape)
                            .alpha(if (selected) 1f else 0f)
                            .background(Color.White)
                    )
                }
                Spacer(Modifier.width(16.dp))
                Text(text)
            }
        }
    }
}

Keyboard Interactions¶

Key	Description
Enter	Selects the radio button, triggering its onSelectedChange callback
Space	Selects the radio button, triggering its onSelectedChange callback
⬇	Moves focus to the next radio button. If focus is on the last button, it moves to the first button.
➡	Moves focus to the next radio button. If focus is on the last button, it moves to the first button.
⬆	Moves focus to the previous radio button. If focus is on the first button, it moves to the last button.
⬅	Moves focus to the previous radio button. If focus is on the first button, it moves to the last button.

Component API¶

RadioGroupState¶

Parameter	Description
`selectedOption`	The currently selected option in the radio group.

rememberRadioGroupState¶

Parameter	Description
`initialValue`	The initial selected option for the radio group state.

RadioGroup¶

Parameter	Description
`state`	The state of the radio group, managing the selected option.
`contentDescription`	Accessibility description of the radio group.
`modifier`	Modifier to be applied to the radio group.
`content`	Composable function to define the radio buttons.

Radio¶

Parameter	Description
`value`	The value associated with the radio button.
`modifier`	Modifier to be applied to the radio button.
`backgroundColor`	Background color of the radio button.
`contentColor`	Color of the content inside the radio button.
`selectedColor`	Color when the radio button is selected.
`enabled`	Whether the radio button is enabled.
`shape`	Shape of the radio button.
`borderColor`	Color of the border.
`borderWidth`	Width of the border.
`contentPadding`	Padding inside the radio button.
`interactionSource`	Interaction source for the radio button.
`indication`	Visual indication for interactions.
`horizontalArrangement`	Horizontal arrangement of the content.
`verticalAlignment`	Vertical alignment of the content.
`content`	Composable function to define the content of the radio button.

Styled Examples¶

Looking for styled components for Jetpack Compose or Compose Multiplatform?

Explore a rich collection of production ready examples at ComposablesUi.com