OudsTriStateCheckboxItem
OUDS Checkbox design guidelines
Checkboxes are input controls that allow users to select one or more options from a number of choices.
This checkbox item supports the indeterminate state: Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.
The indeterminate checkbox item variant can function as a simple input with a label, or it can be combined with optional elements such as helper text, a divider, or an icon, allowing it to suit various use cases.
The OUDS indeterminate checkbox item layout contains an OudsTriStateCheckbox. By clicking on an indeterminate checkbox item, the user changes the checked state of its checkbox.
In most cases, OUDS checkbox items span the entire width of the screen. Thus an horizontal padding of OudsTheme.grids.margin is applied to the content. This behaviour can be disabled by calling com.orange.ouds.core.utilities.edgeToEdgePadding modifier with enabled parameter set to false.
Parameters
Controls whether item's TriStateCheckbox is checked, unchecked or in indeterminate state.
The main label of the checkbox item.
Callback invoked when checkbox item is being clicked, therefore the change of checkbox ToggleableState state is requested. If null, then this is passive and relies entirely on a higher-level component to control the state.
Modifier applied to the layout of the checkbox item.
Optional text displayed below the label.
Optional icon displayed in the item. By default, it has a trailing position. If reversed is set to true, it is displayed as a leading element.
Controls the display of a divider at the bottom of the checkbox item.
When false, the checkbox has a leading position and the optional icon has a trailing position. Otherwise, it is reversed.
Controls the enabled state of the checkbox item. When false, the checkbox, the texts and the optional icon are disabled, and the item will not be clickable.
Controls the read only state of the checkbox item. When true the item's checkbox is disabled but the texts and the icon remain in enabled color. Note that if it is set to true and enabled is set to false, the checkbox item will be displayed in disabled state.
Controls the error state of the checkbox item.
Optional hoisted MutableInteractionSource for observing and emitting Interactions for the item's checkbox. Note that if null is provided, interactions will still happen internally.
See also
If you need a simple item's checkbox that represents Boolean state.
If you only need an indeterminate standalone parent checkbox without any other element.
Samples
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.state.ToggleableState
import com.orange.ouds.core.component.OudsCheckboxItem
import com.orange.ouds.core.component.OudsTriStateCheckboxItem
fun main() {
//sampleStart
var toggleableState by remember { mutableStateOf(ToggleableState.Off) }
OudsTriStateCheckboxItem(
state = toggleableState,
label = "My hobbies",
helperText = "Select the hobbies you practice regularly.",
onClick = {
toggleableState = when (toggleableState) {
ToggleableState.On -> ToggleableState.Off
ToggleableState.Off -> ToggleableState.Indeterminate
ToggleableState.Indeterminate -> ToggleableState.On
}
}
)
//sampleEnd
}