Design/net.ikea.skapa.ui.components/Checkbox

Checkbox

fun Checkbox(checked: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: CheckboxVariant = CheckboxVariant.Subtle, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onCheckedChange: (Boolean) -> Unit?)

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

checked

whether Checkbox is checked or unchecked.

modifier

Modifier to be applied to the layout of the checkbox.

enabled

whether the component is enabled or grayed out.

variant

CheckboxVariant defines the button style from Skapa Checkbox Variants. The default value is CheckboxVariant.Subtle.

interactionSource

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.

onCheckedChange

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.

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.state.ToggleableState
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.TriStateCheckbox

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        var state by remember { mutableStateOf(false) }
        Checkbox(state) { state = it }
        Checkbox("Label that is longer so it requires a line break", state, variant = CheckboxVariant.Emphasised) { state = it }
        Checkbox("Label", state, helperText = "Helper text") { state = it }
    }
} 
   //sampleEnd
}

@Composable

fun Checkbox(label: CharSequence, checked: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: CheckboxVariant = CheckboxVariant.Subtle, error: Boolean = false, helperText: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onCheckedChange: (Boolean) -> Unit?)

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

label

The text to be displayed. Provided label text is also used for contentDescription.

checked

whether Checkbox is checked or unchecked.

modifier

Modifier to be applied to the layout of the checkbox.

enabled

whether the component is enabled or grayed out.

variant

CheckboxVariant defines the button style from Skapa Checkbox Variants. The default value is CheckboxVariant.Subtle.

error

indicates whether the checkbox has an error or not. When is true an error message is display using helperText.

helperText

legend that accompanies the checkbox for clarification and accessibility improvements.

interactionSource

onCheckedChange

TODO Deprecating this function in favour to the other which allows simultaneous caption and helperTextErrorLabel, SFNM-3770

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.state.ToggleableState
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.TriStateCheckbox

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        var state by remember { mutableStateOf(false) }
        Checkbox(state) { state = it }
        Checkbox("Label that is longer so it requires a line break", state, variant = CheckboxVariant.Emphasised) { state = it }
        Checkbox("Label", state, helperText = "Helper text") { state = it }
    }
} 
   //sampleEnd
}

@Composable

fun Checkbox(label: CharSequence, checked: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: CheckboxVariant = CheckboxVariant.Subtle, caption: String? = null, helperTextErrorLabel: String?, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onCheckedChange: (Boolean) -> Unit?)

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

label

The text to be displayed. Provided label text is also used for contentDescription.

checked

whether Checkbox is checked or unchecked.

modifier

Modifier to be applied to the layout of the checkbox.

enabled

whether the component is enabled or grayed out.

variant

CheckboxVariant defines the button style from Skapa Checkbox Variants. The default value is CheckboxVariant.Subtle.

caption

can be used to provide clarification for the option.

helperTextErrorLabel

adds a HelperText with HelperTextState.Error state to specify Errors.

interactionSource

onCheckedChange

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.state.ToggleableState
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.TriStateCheckbox

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        var state by remember { mutableStateOf(false) }
        Checkbox(state) { state = it }
        Checkbox("Label that is longer so it requires a line break", state, variant = CheckboxVariant.Emphasised) { state = it }
        Checkbox("Label", state, helperText = "Helper text") { state = it }
    }
} 
   //sampleEnd
}

Checkbox

Parameters

See also

Samples

Parameters

See also

Samples

Parameters

See also

Samples