Checkboxes allow users to select one or more items from a set.
CheckboxRoundedStrokesSample
@Preview
@Composable
fun CheckboxRoundedStrokesSample() {
val strokeWidthPx = with(LocalDensity.current) { floor(CheckboxDefaults.StrokeWidth.toPx()) }
val checkmarkStroke =
remember(strokeWidthPx) {
Stroke(width = strokeWidthPx, cap = StrokeCap.Round, join = StrokeJoin.Round)
}
val outlineStroke = remember(strokeWidthPx) { Stroke(width = strokeWidthPx) }
val checkedState = remember { mutableStateOf(true) }
Checkbox(
checked = checkedState.value,
onCheckedChange = { checkedState.value = it },
checkmarkStroke = checkmarkStroke,
outlineStroke = outlineStroke,
)
}
CheckboxSample
@Preview
@Composable
fun CheckboxSample() {
val checkedState = remember { mutableStateOf(true) }
Checkbox(checked = checkedState.value, onCheckedChange = { checkedState.value = it })
}
CheckboxWithTextSample
@Preview
@Composable
fun CheckboxWithTextSample() {
val (checkedState, onStateChange) = remember { mutableStateOf(true) }
val interactionSource = remember { MutableInteractionSource() }
Row(
Modifier.fillMaxWidth()
.height(56.dp)
.toggleable(
value = checkedState,
onValueChange = { onStateChange(!checkedState) },
role = Role.Checkbox,
indication = null,
interactionSource = interactionSource,
)
.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Checkbox(
checked = checkedState,
interactionSource = interactionSource,
onCheckedChange = onStateChange,
)
Text(
text = "Option selection",
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.padding(start = 16.dp),
)
}
}