{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","required","admonition"]},"type":"markdown"},"seo":{"title":"Toggle component","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"toggle-component","__idx":0},"children":["Toggle component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how to configure the toggle switch component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, the toggle component requires the following configuration to function:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    label = \"Use different PayPal account\"\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The toggle label text. This is displayed next to the switch and describes the toggle's purpose."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure additional settings:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    // Required configuration\n    label = \"Use different PayPal account\",\n    \n    // Initial state\n    initialChecked = false,\n    \n    // Indicators\n    activeIndicator = \"ON\",\n    inactiveIndicator = \"OFF\",\n    \n    // Visibility\n    isVisible = true\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["initialChecked"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The initial toggle state. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["activeIndicator"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Optional text displayed on the active toggle. Requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.showIndicator = true"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inactiveIndicator"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Optional text displayed on the inactive toggle. Requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.showIndicator = true"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isVisible"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether the toggle is visible. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The toggle uses Android's Material Switch composable under the hood, ensuring native platform behaviour while allowing extensive customisation."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":4},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":5},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The toggle component renders with these default styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"labelStyle = ToggleLabelStyle(\n    color = Color.Black,\n    fontSizeSp = 16f,\n    fontWeight = FontWeight.Normal,\n    position = LabelPosition.END,\n    spacing = 8.dp\n)\n\ntoggleStyle = ToggleVisualStyle(\n    width = 48.dp,\n    height = 28.dp,\n    borderRadius = 14.dp,\n    activeTrackColor = Color(0xFF0B74C8),\n    inactiveTrackColor = Color(0xFFB0BEC5),\n    activeThumbColor = Color.White,\n    inactiveThumbColor = Color.White\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can override the default appearance by providing custom styles for any part of the component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    label = \"Use different PayPal account\",\n    \n    // Label styling\nlabelStyle = ToggleLabelStyle(\n        color = Color(0xFF2C2E2F),\n        fontSizeSp = 15f,\n        fontWeight = FontWeight.Medium,\n        position = LabelPosition.START,\n        spacing = 12.dp\n    ),\n    \n    // Toggle switch styling\ntoggleStyle = ToggleVisualStyle(\n        // Dimensions\n        width = 54.dp,\n        height = 32.dp,\n        borderWidth = 2.dp,\n        borderColor = Color(0xFFDEE2E6),\n        borderRadius = 16.dp,\n        \n        // Colors\n        activeTrackColor = Color(0xFF0070BA),\n        inactiveTrackColor = Color(0xFFCED4DA),\n        activeThumbColor = Color.White,\n        inactiveThumbColor = Color.White,\n        \n        // Indicators\n        showIndicator = true,\n        indicatorTextSizeSp = 10f,\n        indicatorFontWeight = FontWeight.Bold,\n        indicatorTextColor = Color.White\n    ),\n    \n    activeIndicator = \"ON\",\n    inactiveIndicator = \"OFF\"\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ToggleLabelStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Label typography and positioning controls. Defaults to the default label style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle.color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour of the label. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.Black"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle.fontSizeSp"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Float"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size in scaled pixels. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16f"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle.fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FontWeight"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The weight/boldness of the text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FontWeight.Normal"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle.position"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["LabelPosition"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label position relative to toggle. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LabelPosition.END"]},".",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["START"]},": Left of the toggle"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["END"]},": Right of the toggle"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TOP"]},": Above the toggle"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BOTTOM"]},": Below the toggle"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle.spacing"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The distance between the label and toggle. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["8.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ToggleVisualStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Switch appearance controls. Defaults to the default toggle style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.width"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The width of the toggle track. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["48.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.height"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The height of the toggle track. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["28.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border thickness around the toggle. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["0.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The colour of the border. Defaults to transparent."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Dp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The corner radius of the toggle. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["14.dp"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.activeTrackColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The track colour when the toggle is on. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color(0xFF0B74C8)"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.inactiveTrackColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The track colour when the toggle is off. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color(0xFFB0BEC5)"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.activeThumbColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The thumb (circle) colour when on. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.White"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.inactiveThumbColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The thumb (circle) colour when off. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.White"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.showIndicator"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to show text indicators on the toggle track. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.indicatorTextSizeSp"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Float"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size for the indicator text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["10f"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.indicatorFontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FontWeight"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font weight for the indicator text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FontWeight.Normal"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggleStyle.indicatorTextColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The colour of the indicator text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.White"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":7},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The toggle component provides event handlers for user interactions:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    onToggleChanged = { isChecked: Boolean -> }\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onToggleChanged: ((Boolean) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the toggle's state changes. The boolean parameter indicates the new checked state (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," for on, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," for off)."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed information about event data structures and usage patterns, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/paypal/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":8},"children":["Methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The toggle component provides methods for state management."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"content","__idx":9},"children":["Content()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the toggle switch in Jetpack Compose:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun ToggleSection() {\n    val toggleComponent = remember {\n        pxpCheckout.createComponent(\n            type = ComponentType.TOGGLE,\n            config = toggleConfig\n        )\n    }\n    \n    pxpCheckout.buildComponentView(\n        component = toggleComponent,\n        modifier = Modifier.fillMaxWidth()\n    )\n}\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"getvalue","__idx":10},"children":["getValue()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Retrieves the current toggle state:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val isToggleOn = toggleComponent.getValue() as? Boolean ?: false\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"setvisibility","__idx":11},"children":["setVisibility()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Controls the visibility of the toggle:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"toggleComponent.setVisibility(isVisible = true)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":12},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-toggle-switch","__idx":13},"children":["Basic toggle switch"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A straightforward implementation with essential configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    label = \"Use different PayPal account\",\n    initialChecked = false,\n    \n    onToggleChanged = { isChecked ->\n        Log.d(\"Toggle\", \"Payment method toggle: $isChecked\")\n        if (isChecked) {\n            showPayPalLogin()\n        } else {\n            useVaultedAccount()\n        }\n    }\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"toggle-with-indicators","__idx":14},"children":["Toggle with indicators"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation with visual on/off indicators:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    label = \"Enable one-click payment\",\n    initialChecked = false,\n    activeIndicator = \"ON\",\n    inactiveIndicator = \"OFF\",\n    \n    toggleStyle = ToggleVisualStyle(\n        width = 54.dp,\n        height = 32.dp,\n        borderRadius = 16.dp,\n        activeTrackColor = Color(0xFF28A745),\n        inactiveTrackColor = Color(0xFFDC3545),\n        activeThumbColor = Color.White,\n        inactiveThumbColor = Color.White,\n        showIndicator = true,\n        indicatorTextSizeSp = 10f,\n        indicatorFontWeight = FontWeight.Bold,\n        indicatorTextColor = Color.White\n    ),\n    \n    onToggleChanged = { isChecked ->\n        Log.d(\"Toggle\", \"One-click payment: ${if (isChecked) \"enabled\" else \"disabled\"}\")\n        updateOneClickPaymentPreference(isChecked)\n    }\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enterprise-toggle-with-custom-styling","__idx":15},"children":["Enterprise toggle with custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive implementation with full customisation:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val toggleConfig = ToggleComponentConfig(\n    label = \"Change preferred payment method\",\n    initialChecked = false,\n    activeIndicator = \"YES\",\n    inactiveIndicator = \"NO\",\n    \n    // Custom label styling\n    labelStyle = ToggleLabelStyle(\n        color = Color(0xFF212529),\n        fontSizeSp = 15f,\n        fontWeight = FontWeight.SemiBold,\n        position = LabelPosition.START,\n        spacing = 16.dp\n    ),\n    \n    // Custom toggle styling\n    toggleStyle = ToggleVisualStyle(\n        // Dimensions\n        width = 60.dp,\n        height = 34.dp,\n        borderWidth = 2.dp,\n        borderColor = Color(0xFFDEE2E6),\n        borderRadius = 17.dp,\n        \n        // Active state colors\n        activeTrackColor = Color(0xFF0070BA),\n        activeThumbColor = Color.White,\n        \n        // Inactive state colors\n        inactiveTrackColor = Color(0xFFE9ECEF),\n        inactiveThumbColor = Color(0xFF6C757D),\n        \n        // Indicator styling\n        showIndicator = true,\n        indicatorTextSizeSp = 9f,\n        indicatorFontWeight = FontWeight.Black,\n        indicatorTextColor = Color.White\n    ),\n    \n    onToggleChanged = { isChecked ->\n        Log.d(\"Toggle\", \"Payment method switch toggled: $isChecked\")\n        \n        // Track analytics\n        trackAnalyticsEvent(\"payment_method_toggle\", mapOf(\n            \"action\" to if (isChecked) \"change_method\" else \"use_saved\",\n            \"timestamp\" to System.currentTimeMillis()\n        ))\n        \n        // Update UI state\n        if (isChecked) {\n            // User wants to use a different payment method\n            showPaymentMethodSelector()\n            hideVaultedPaymentInfo()\n        } else {\n            // User wants to use saved payment method\n            hidePaymentMethodSelector()\n            showVaultedPaymentInfo()\n        }\n        \n        // Save preference\n        savePaymentMethodPreference(isChecked)\n    }\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"linked-with-paypal-component","__idx":16},"children":["Linked with PayPal component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example showing how to link toggle with PayPal component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"// Create toggle component first\nval toggleComponent = pxpCheckout.createComponent(\n    type = ComponentType.TOGGLE,\n    config = ToggleComponentConfig(\n        label = \"Use different PayPal account\",\n        initialChecked = false,\n        labelStyle = ToggleLabelStyle(\n            color = Color(0xFF0070BA),\n            fontSizeSp = 14f,\n            fontWeight = FontWeight.Medium,\n            position = LabelPosition.END,\n            spacing = 12.dp\n        ),\n        toggleStyle = ToggleVisualStyle(\n            activeTrackColor = Color(0xFF0070BA),\n            inactiveTrackColor = Color(0xFFCED4DA)\n        )\n    )\n)\n\n// Link to PayPal component\nval paypalConfig = PayPalComponentConfig(\n    renderType = \"standalone\",\n    fundingSources = \"paypal\",\n    enableOneClickPayment = true,\n    toggleComponent = toggleComponent,\n    scriptParams = PayPalScriptParams(\n        userIdToken = getUserIdToken()\n    )\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dynamic-toggle-visibility","__idx":17},"children":["Dynamic toggle visibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example showing how to control toggle visibility based on vault status:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"@Composable\nfun DynamicPayPalToggle() {\n    var hasVaultedAccount by remember { mutableStateOf(false) }\n    \n    LaunchedEffect(Unit) {\n        hasVaultedAccount = checkVaultStatus()\n    }\n    \n    val toggleConfig = remember {\n        ToggleComponentConfig(\n            label = \"Change payment method\",\n            initialChecked = false,\n            isVisible = hasVaultedAccount,\n            onToggleChanged = { isChecked ->\n                handlePaymentMethodChange(isChecked)\n            }\n        )\n    }\n    \n    val toggleComponent = remember {\n        pxpCheckout.createComponent(\n            type = ComponentType.TOGGLE,\n            config = toggleConfig\n        )\n    }\n    \n    // Toggle automatically shows/hides based on vault status\n    if (hasVaultedAccount) {\n        pxpCheckout.buildComponentView(\n            component = toggleComponent,\n            modifier = Modifier.fillMaxWidth()\n        )\n    }\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Toggle component","id":"toggle-component","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Methods","id":"methods","depth":2},{"value":"Content()","id":"content","depth":3},{"value":"getValue()","id":"getvalue","depth":3},{"value":"setVisibility()","id":"setvisibility","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic toggle switch","id":"basic-toggle-switch","depth":3},{"value":"Toggle with indicators","id":"toggle-with-indicators","depth":3},{"value":"Enterprise toggle with custom styling","id":"enterprise-toggle-with-custom-styling","depth":3},{"value":"Linked with PayPal component","id":"linked-with-paypal-component","depth":3},{"value":"Dynamic toggle visibility","id":"dynamic-toggle-visibility","depth":3}],"frontmatter":{"seo":{"title":"Toggle component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/paypal/toggle-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}