Switch

The FioriSwitch is a composable function that combines a switch composable and label and optional message.

Quick Setting Up

Set up the FioriSwitch

var checked by remember { mutableStateOf(false) }

FioriSwitch(content =
    FioriSwitchContent(
        label = ToggleLabel(
            checkedLabel = "Switch On",
            uncheckedLabel = "Switch Off"
        )
    ),

    checked = checked,
    onCheckedChange = {
        checked = it
    }
)

• Use the checked* variable can be used to control the state of switch. Set it to true to turn the switch on and to false to turn it off.

onCheckedChange callback is triggered when the user clicks the toggle button. The parameter of the callback indicates the checked state after it is clicked. The callback is also triggered when switch itself is clicked.

Add Message for Switch

There may be cases where message notifications should be displayed on switching. You can display the different messages using something similar to the following code:

var checked = remember({ mutableStateOf(false) })
var isError by remember { mutableStateOf(true)}
FioriSwitch(
    content = FioriSwitchContent(
        label = ToggleLabel(
            checkedLabel = "Label On",
            uncheckedLabel = "Label Off"
        ),
        message = StateMessage(
            successMessage = "Success",
            errorMessage = "Error"
        ),
    ),
    checked = checked.value,
    isError = isError,
    onCheckedChange = {
        isError = !it // Use a Boolean value to set the message.
        checked.value=it

    }

)

The isError variable indicates the state of the switch. If it is true, errorMessage is displayed

---

Last update: February 20, 2023