Checkbox
Checkbox component is a control that toggles between checked and unchecked as its default states. Used to choose one or more options from a limited number of options.
Note: This component is the raw version of Checkbox and will not pass Accessibility for neither Talkback nor touch area size. Either use the Checkbox with provided label or handle Accessibility requirements manually. Checkboxes should be associated with a label. If a checkbox is used without one, it must strongly connect to another element that represents the value being selected.
Parameters
whether Checkbox is checked or unchecked.
Modifier to be applied to the layout of the checkbox.
whether the component is enabled or grayed out.
CheckboxVariant defines the button style from Skapa Checkbox Variants. The default value is CheckboxVariant.Subtle.
The MutableInteractionSource representing the stream of Interactions for this Checkbox. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Checkbox in different Interactions.
callback to be invoked when checkbox is being clicked, therefore the change of checked state in requested. If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.
See also
Samples
SkapaTheme2(isSystemInDarkTheme()) {
Column {
var state by remember { mutableStateOf(false) }
Checkbox(checked = state) { state = it }
Checkbox("Label that is longer so it requires a line break", checked = state, variant = CheckboxVariant.Emphasised) { state = it }
Checkbox(label = "Label", checked = state, caption = "Helper text") { state = it }
val uriHandler = LocalUriHandler.current
val url = "https://www.ikea.com"
// Example of how to create a label with a clickable link inside
val labelHtmlAnnotatedString = buildAnnotatedString {
append("Label with a nested ")
pushLink(
LinkAnnotation.Url(
url = url,
styles = TextLinkStyles(
style = hyperlinkStyle(color = HyperlinkColor.Grey, active = false),
pressedStyle = hyperlinkStyle(color = HyperlinkColor.Grey, active = true)
),
linkInteractionListener = {
// Handle the link click event here
uriHandler.openUri("https://www.ikea.com")
}
)
)
append(url)
pop()
append(" link.")
}
Checkbox(label = labelHtmlAnnotatedString, checked = state) { state = it }
}
}Checkbox component is a control that toggles between checked and unchecked as its default states. Used to choose one or more options from a limited number of options.
Parameters
The text to be displayed. Provided label text is also used for contentDescription.
whether Checkbox is checked or unchecked.
Modifier to be applied to the layout of the checkbox.
whether the component is enabled or grayed out.
CheckboxVariant defines the button style from Skapa Checkbox Variants. The default value is CheckboxVariant.Subtle.
can be used to provide clarification for the option.
adds a HelperText with HelperTextState.Error state to specify Errors.
The MutableInteractionSource representing the stream of Interactions for this Checkbox. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Checkbox in different Interactions.
Whether this checkbox field is required. Adds a leading asterisk (*) and requires a contentDescription.
callback to be invoked when checkbox is being clicked, therefore the change of checked state in requested. If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.
See also
Samples
SkapaTheme2(isSystemInDarkTheme()) {
Column {
var state by remember { mutableStateOf(false) }
Checkbox(checked = state) { state = it }
Checkbox("Label that is longer so it requires a line break", checked = state, variant = CheckboxVariant.Emphasised) { state = it }
Checkbox(label = "Label", checked = state, caption = "Helper text") { state = it }
val uriHandler = LocalUriHandler.current
val url = "https://www.ikea.com"
// Example of how to create a label with a clickable link inside
val labelHtmlAnnotatedString = buildAnnotatedString {
append("Label with a nested ")
pushLink(
LinkAnnotation.Url(
url = url,
styles = TextLinkStyles(
style = hyperlinkStyle(color = HyperlinkColor.Grey, active = false),
pressedStyle = hyperlinkStyle(color = HyperlinkColor.Grey, active = true)
),
linkInteractionListener = {
// Handle the link click event here
uriHandler.openUri("https://www.ikea.com")
}
)
)
append(url)
pop()
append(" link.")
}
Checkbox(label = labelHtmlAnnotatedString, checked = state) { state = it }
}
}Checkbox component is a control that toggles between checked and unchecked as its default states. Used to choose one or more options from a limited number of options.
Parameters
The text to be displayed. Provided label text is also used for contentDescription.
whether Checkbox is checked or unchecked.
Modifier to be applied to the layout of the checkbox.
whether the component is enabled or grayed out.
CheckboxVariant defines the button style from Skapa Checkbox Variants. The default value is CheckboxVariant.Subtle.
can be used to provide clarification for the option.
adds a HelperText with HelperTextState.Error state to specify Errors.
The MutableInteractionSource representing the stream of Interactions for this Checkbox. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Checkbox in different Interactions.
Whether this checkbox/field is required to be selected. Will add a leading asterisk (*) and requires a contentDescription.
callback to be invoked when checkbox is being clicked, therefore the change of checked state in requested. If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.
See also
Samples
SkapaTheme2(isSystemInDarkTheme()) {
Column {
var state by remember { mutableStateOf(false) }
Checkbox(checked = state) { state = it }
Checkbox("Label that is longer so it requires a line break", checked = state, variant = CheckboxVariant.Emphasised) { state = it }
Checkbox(label = "Label", checked = state, caption = "Helper text") { state = it }
val uriHandler = LocalUriHandler.current
val url = "https://www.ikea.com"
// Example of how to create a label with a clickable link inside
val labelHtmlAnnotatedString = buildAnnotatedString {
append("Label with a nested ")
pushLink(
LinkAnnotation.Url(
url = url,
styles = TextLinkStyles(
style = hyperlinkStyle(color = HyperlinkColor.Grey, active = false),
pressedStyle = hyperlinkStyle(color = HyperlinkColor.Grey, active = true)
),
linkInteractionListener = {
// Handle the link click event here
uriHandler.openUri("https://www.ikea.com")
}
)
)
append(url)
pop()
append(" link.")
}
Checkbox(label = labelHtmlAnnotatedString, checked = state) { state = it }
}
}