Package-level declarations

Switches can be used in forms on a full page, in modals, or on side panels. They can be used in a list but we shouldn’t mix them with other components such as ./CheckBox.md or ./RadioButton.md.

Switches must respect the established color code and not use other colors to emphasize the activation and deactivation of a functionality or service.

Switch component allows the user to activate or deactivate the state of an element or concept. It is usually used as an element to add services, activate functionalities or adjust settings. It is also used to control binary options (On/Off or True/False).

SwitchLabelled

Part
Pro

The minimal usage of the component is a standalone checkbox but you can add a label using Switch.kt. Please refer to design specs to find what content is accepted.

• An icon can be added on the left or right of label.

• A caption can be added in different positions of the label in order to to expand the information.

var checked by remember { mutableStateOf(false) }
SwitchLabelled(
    checked = checked,
    onCheckedChange = {
        checked = !checked
    }
) { Text(text = "Switch On") }

Styles

The Switch and SwitchLabelled accept the following ToggleIntent.kts:

• Basic (default)

• Accent

• Main

• Support

• Success

• Alert

• Danger

• Info

• Neutral

Layout

• The Switch respects the minimum touch size.

• Switch labels can be positioned at the Left or the Right, but usually the left position is more often used on small screens and mobile devices.

SwitchGroup

🚀 TODO We plan to provide a layout composable to make it easier to follow the design specs.

The radio button allow users to select one option from a set.

• Use radio buttons to select a single option from a list

• It should be visible at a glance if a radio button has been selected, and selected items should be more visually prominent than unselected items.

• Present a list showing all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

The minimal usage of the component is the radio button in standalone but you can add a content at the end of the radio or customize it.

var selected by remember { mutableStateOf(true) }
RadioButton(
    selected = selected,
    onClick = {
        selected = !selected
    }
)

CheckBoxLabelled

The main radio button allow users to select one option from a set.

• Use radio buttons to select a single option from a list

• It should be visible at a glance if a radio button has been selected, and selected items should be more visually prominent than unselected items.

• Present a list showing all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

The minimal usage of the component is the radiobutton in standalone but you can add a content at the end of the box or customize it.

var selected by remember { mutableStateOf(true) }
RadioButtonLabelled(
    selected = selected,
    onClick = {
        selected = !selected
    }
) { Text("RadioButton On") }

Styles

The RadioButton and RadioButtonLabelled accept the following ToggleIntent.kts:

• Basic (default)

• Accent

• Main

• Support

• Success

• Alert

• Danger

• Info

• Neutral

Layout

RadioGroup

🚀 TODO We plan to provide a layout composable to make it easier to follow the design specs.

@Composable
fun RadioGroupSample() {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(Modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            RadioButtonLabelled(
                selected = text == selectedOption,
                onClick = { selectedOption(text) },
            ) { Text(text) }
        }
    }
}

Form states 🚀 TODO

Checkboxes allows users to select one or more items from a set. Checkboxes can turn an option on or off.

• Toggle a single item on or off.

• Require another action to activate or deactivate something.

• In cases of a global activation in a indeterminate state where on and off states coexist in the children.

The minimal usage of the component is the checkbox in standalone but you can add a content at the end of the box or customize it.

var checkedState by remember { mutableStateOf(ToggleableState.On) }
Checkbox(
    state = checkedState,
    onCheckedChange = {
        isChecked = !isChecked
    }
)

CheckBoxLabelled

The Checkbox allows users to select one or more items from a set. Checkboxes can turn an option on or off.

The minimal usage of the component is the checkbox in standalone but you can add a content at the end of the box or customize it.

var checkedState by remember { mutableStateOf(ToggleableState.On) }
CheckboxLabelled(
    state = checkedState,
    onClick = {},
) { Text("CheckBox On") }

Styles

The CheckBox and CheckboxLabelled accept the following ToggleIntent.kts:

• Basic (default)

• Accent

• Main

• Support

• Success

• Alert

• Danger

• Info

• Neutral

Layout

CheckBoxGroup

🚀 TODO We plan to provide a layout composable to make it easier to follow the design specs.

@Composable
fun CheckboxSample() {
    Column {
        // define dependent checkboxes states
        val (state, onStateChange) = remember { mutableStateOf(ToggleableState.On) }
        val (state2, onStateChange2) = remember { mutableStateOf(ToggleableState.On) }
        // TriStateCheckbox state reflects state of dependent checkboxes
        val parentState = remember(state, state2) {
            if (state && state2) ToggleableState.On
            else if (!state && !state2) ToggleableState.Off
            else ToggleableState.Indeterminate
        }
        // click on TriStateCheckbox can set state for dependent checkboxes
        val onParentClick = {
            val s = parentState != ToggleableState.On
            onStateChange(s)
            onStateChange2(s)
        }
        Option(
            state = parentState,
            onClick = onParentClick,
        )
        Column(modifier = Modifier.selectableGroup()) {
            Option(state, onStateChange)
            Option(state2, onStateChange2)
        }
    }
}

@Composable
fun Option(
    option: String,
    onClick: (() -> Unit)
) {
    CheckboxLabelled(
        state = checkedState,
        onClick = onClick,
    ) { Text(option) }
}

Form states 🚀 TODO