Checkbox

A toggleable component in the form of a checkbox

View in Playground

Constructors

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    enabled: Boolean = true,
    modifier: Modifier = Modifier.None,
    color: Color = (+MaterialTheme.colors()).secondary
)
  • checked – whether or not the checkbox is currently checked
    • required
  • onCheckedChange – a callback that will receive change events
    for when the checkbox selected state changes
    • required
  • modifier – the modifier(s) to be applied to the checkbox
  • color – the color to be used for the checkbox. If not provided,
    then the secondary color from the application theme will be applied

Examples

Simple checkbox

Checkbox(
    checked = false,
    onCheckedChange = { }
)

Checkbox

Styled checkbox

Checkbox(
    checked = false,
    onCheckedChange = { },
    color = Color.Red
)

Colored checkbox

Enabling / Disabling the checkbox

To enabled / disable the checkbox for user interactions, we can
use the enabled property.

@Composable
fun CheckboxComponent(formState: FormState) {
    Checkbox(
        checked = formState.optionChecked,
        onCheckedChange = { },
        enabled = formState.enabled
    )
}

Checkbox with label

@Composable
fun CheckboxWithLabel(formState: FormState) {
    Clickable(onClick = {
        formState.optionChecked = !formState.optionChecked
    }) {
        Row {
            Checkbox(
                checked = formState.optionChecked,
                onCheckedChange = { checked ->
                    formState.optionChecked = checked
                }
            )
            Text(
                text = "Notify me of updates",
                modifier = Modifier.padding(start = 8.dp)
            )
        }
    }
}