Skip to content

Component

RadioButton

A FormaUI radio button — a themed control for choosing one option from a set.

dev.formaui.components.radiobutton

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

val options = listOf("Standard", "Priority", "Overnight")
var selected by remember { mutableStateOf(options.first()) }
Column(Modifier.selectableGroup()) {
    options.forEach { option ->
        Row(Modifier.selectable(
            selected = option == selected,
            role = Role.RadioButton,
            onClick = { selected = option },
        )) {
            FormaRadioButton(selected = option == selected, onClick = null)
            Text(option)
        }
    }
}

FormaRadioButton

A stateless single-choice control with hoisted selected state; group several with Modifier.selectableGroup() and pass onClick = null when the row owns selection.

selectedrequiredTypeBooleanDefaultrequiredDescriptionWhether this option is the selected one in its group.
onClickrequiredType(() -> Unit)?DefaultrequiredDescriptionCalled when this option is clicked, or null to make the radio button non-interactive.
modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the radio button.
enabledTypeBooleanDefaulttrueDescriptionWhether the radio button is interactive.
colorsTypeRadioButtonColors?DefaultnullDescriptionThe radio button colors (defaults to the M3 defaults, themed by FormaTheme).
interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionThe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally.

Accessibility

48dp touch target via Material 3's minimum interactive component size; apply Modifier.selectableGroup() to the container so screen readers announce the set and position (e.g. "2 of 4"), and prefer row-level Modifier.selectable with onClick = null so the whole row is one accessible target.