Checkbox

A 24 dp rounded square toggle with animated color transitions, a disabled state, and full color customization via CheckboxDefaults.

Checkbox renders a 24 dp square with a sm corner radius. Background, border, and checkmark colors all animate over 100 ms when the state changes. When pressed, the border briefly switches to the theme's ring color as a focus indicator.

Basic usage

Disabled

Set enabled = false to prevent interaction. The component renders with the theme's muted background and ignores taps.

Custom colors

Override any color token via CheckboxDefaults.colors().copy(...). The example below wires border and fill colors to state so the surrounding card also reacts to the checked value.

API reference

Checkbox

ParameterTypeDefaultDescription
checkedBooleanWhether the checkbox is currently checked.
onCheckedChange((Boolean) -> Unit)?Called with the new value when the user toggles. Pass null to make the checkbox non-interactive while still rendering state.
modifierModifierModifierApplied to the 24 dp box.
enabledBooleantrueWhen false, the checkbox ignores input and renders with the muted color.
colorsCheckboxColorsCheckboxDefaults.colors()Color tokens for each visual state.

CheckboxColors

FieldTypeDescription
checkedColorColorBackground when checked.
uncheckedColorColorBackground when unchecked. Defaults to Color.Transparent.
disabledColorColorBackground when disabled.
checkedCheckmarkColorColorCheck icon tint when checked.
uncheckedCheckmarkColorColorCheck icon tint when unchecked. Defaults to Color.Transparent.
disabledCheckmarkColorColorCheck icon tint when disabled.
checkedBorderColorColorBorder color when checked.
uncheckedBorderColorColorBorder color when unchecked.

CheckboxDefaults

MemberDescription
colors()Returns a CheckboxColors using primary for checked states, input for the unchecked border, and muted for the disabled background.
Edit this page on GitHub