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?)(source)

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.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 {
        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 }
    }
} 
   //sampleEnd
}

@Composable

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

@Composable

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

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.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 {
        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 }
    }
} 
   //sampleEnd
}

Checkbox

Parameters

See also

Samples

Parameters

See also

Samples