TriStateCheckbox
TriStateCheckbox should be used when selections can contain sub-selections.
If the parent checkbox is selected, all child checkboxes become selected. If some of the checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.
Note: This component is the raw version of TriStateCheckbox and will not pass Accessibility for neither Talkback nor touch area size. Either use the TriStateCheckbox 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 TriStateCheckbox is checked, unchecked or in indeterminate state.
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 ToggleableState state is requested. If null, then this is passive and relies entirely on a higher-level component to control the state.
See also
if you want a simple component that represents Boolean state
TriStateCheckbox should be used when selections can contain sub-selections.
If the parent checkbox is selected, all child checkboxes become selected. If some of the checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.
Parameters
The text to be displayed.
whether TriStateCheckbox is checked, unchecked or in indeterminate state.
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.
callback to be invoked when checkbox is being clicked, therefore the change of ToggleableState state is requested. If null, then this is passive and relies entirely on a higher-level component to control the state.
See also
if you want a simple component that represents Boolean state
Samples
import android.content.res.Configuration
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Checkbox
import net.ikea.skapa.ui.components.CheckboxGroup
import net.ikea.skapa.ui.components.CheckboxGroupItem
import net.ikea.skapa.ui.components.CheckboxVariant
import net.ikea.skapa.ui.components.HelperText
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.HyperlinkColor
import net.ikea.skapa.ui.components.TriStateCheckbox
import net.ikea.skapa.ui.components.hyperlinkStyle
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column {
val toggleState = rememberSaveable { mutableStateOf(ToggleableState.Indeterminate) }
TriStateCheckbox(label = "Indeterminate", toggleState = toggleState.value) {
toggleState.value = it
}
TriStateCheckbox(label = "Label that is longer so it requires a line break", toggleState = toggleState.value) {
toggleState.value = it
}
TriStateCheckbox(label = "Indeterminate", toggleState = toggleState.value, helperTextErrorLabel = "Helper text") {
toggleState.value = it
}
}
}
//sampleEnd
}