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 validationMessageData in FioriSwitchContent:

var checked = remember({ mutableStateOf(false) })
var isError by remember { mutableStateOf(true) }
FioriSwitch(
    content = FioriSwitchContent(
        label = ToggleLabel(
            checkedLabel = "Label On",
            uncheckedLabel = "Label Off"
        ),
        validationMessageData = ValidationMessageData(
            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 set to true, an errorMessage is displayed.

Note

The message: StateMessage and helperText: String parameters of FioriSwitchContent are deprecated. Use validationMessageData instead.

// Deprecated
FioriSwitchContent(
    message = StateMessage(successMessage = "Success", errorMessage = "Error"),
    helperText = "Helper text"
)

// Recommended
FioriSwitchContent(
    validationMessageData = ValidationMessageData(
        successMessage = "Success",
        errorMessage = "Error",
        helperText = "Helper text"
    )
)

ValidationMessageData supports multiple semantic states and helper text:

data class ValidationMessageData(
    var semanticType: SemanticType = SemanticType.None,
    var warningMessage: String? = null,
    var informationMessage: String? = null,
    var successMessage: String? = null,
    var helperText: String? = null,
    var errorMessage: String? = null
)

Read Only Message

When the FioriSwitch is in read-only mode, the readOnlyMessage parameter of FioriSwitchContent defines the labels displayed for each state. It accepts a Pair<String, String> where the first value is the message shown when the switch is on and the second is shown when it is off. If readOnlyMessage is null, it defaults to displaying "On" / "Off".

FioriSwitch(
    content = FioriSwitchContent(
        label = ToggleLabel(
            checkedLabel = "Notifications",
            uncheckedLabel = "Notifications"
        ),
        readOnlyMessage = Pair("Enabled", "Disabled")
    ),
    checked = checked,
    isReadOnly = true,
    onCheckedChange = {}
)

Inline AI Notice

The Inline AI Notice is shown when displaying generative content, such a suggestions for a switch value. Create an instance of InlineNoticeData with the appropriate data and pass it as a parameter of FioriSwitchContent. A lambda function for handling hyperlink onClick events must also be provided. See InlineNotice for more details.

val content = FioriSwitchContent(
  /* other parameters */
  inlineNoticeData = InlineNoticeData(showInlineNotice = true)
)
FioriSwitch(
  /* other parameters */
  content = content,
  onHyperlinkClick = { /* Handle inline notice hyperlink click */ }
)

---

Last update: April 15, 2026