Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Switch

Control that allows users to turn on or off item

banner-Switch
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

A simple switch toggle, which supports large (default), medium and small sizes, and an optional text label on its right side.

Usage

To use the Legion iOS UIKit theme, you need to import one of the available themes. Currently, the following themes are supported: ThemeAGR, ThemeEazy, ThemeIHS, ThemeLGN, ThemeMyTEnS.

import ThemeLGN

Size

Large

Active: true, Disable: true, without Text Label

LGNSwitch Large Active Disabled without Text Label
let lgnSwitch = LGNSwitch(
    active: true,
    disable: true,
    size: .lg
)

Active: true, Disable: true, with Text Label

LGNSwitch Large Active Disabled
let lgnSwitch = LGNSwitch(
    active: true,
    disable: true,
    size: .lg,
    textLabel: "Text Option"
)

Active: true, Disable: false, without Text Label

LGNSwitch Large Active Enabled without Text Label
let lgnSwitch = LGNSwitch(
    active: true,
    disable: false,
    size: .lg
)

Active: true, Disable: false, with Text Label

LGNSwitch Large Active Enabled with Text Label
let lgnSwitch = LGNSwitch(
    active: true,
    disable: false,
    size: .lg,
    textLabel: "Text Option"
)

Active: false, Disable: true, without Text Label

LGNSwitch Large Inactive Disabled without TextLabel
let lgnSwitch = LGNSwitch(
    active: false,
    disable: true,
    size: .lg
)

Active: false, Disable: true, with Text Label

LGNSwitch Large Inactive Disabled
let lgnSwitch = LGNSwitch(
    active: false,
    disable: true,
    size: .lg,
    textLabel: "Text Option"
)

Active: false, Disable: false, without Text Label

LGNSwitch Large Inactive Enabled without TextLabel
let lgnSwitch = LGNSwitch(
    active: false,
    disable: false,
    size: .lg
)

Active: false, Disable: false, with Text Label

LGNSwitch Large Inactive Enabled
let lgnSwitch = LGNSwitch(
    active: false,
    disable: false,
    size: .lg,
    textLabel: "Text Option"
)

Medium

Active: true, Disable: true, with Text Label

LGNSwitch Medium Active Disabled
let lgnSwitch = LGNSwitch(
    active: true,
    disable: true,
    size: .md,
    textLabel: "Text Option"
)

Active: true, Disable: false, with Text Label

LGNSwitch Medium Active Enabled
let lgnSwitch = LGNSwitch(
    active: true,
    disable: false,
    size: .md,
    textLabel: "Text Option"
)

Active: false, Disable: true, with Text Label

LGNSwitch Medium Inactive Disabled
let lgnSwitch = LGNSwitch(
    active: false,
    disable: true,
    size: .md,
    textLabel: "Text Option"
)

Active: false, Disable: false, with Text Label

LGNSwitch Medium Inactive Enabled
let lgnSwitch = LGNSwitch(
    active: false,
    disable: false,
    size: .md,
    textLabel: "Text Option"
)

Small

Active: true, Disable: true, with Text Label

LGNSwitch Small Active Disabled
let lgnSwitch = LGNSwitch(
    active: true,
    disable: true,
    size: .sm,
    textLabel: "Text Option"
)

Active: true, Disable: false, with Text Label

LGNSwitch Small Active Enabled
let lgnSwitch = LGNSwitch(
    active: true,
    disable: false,
    size: .sm,
    textLabel: "Text Option"
)

Active: false, Disable: true, with Text Label

LGNSwitch Small Inactive Disabled
let lgnSwitch = LGNSwitch(
    active: false,
    disable: true,
    size: .sm,
    textLabel: "Text Option"
)

Active: false, Disable: false, with Text Label

LGNSwitch Small Inactive Enabled
let lgnSwitch = LGNSwitch(
    active: false,
    disable: false,
    size: .sm,
    textLabel: "Text Option"
)

Properties

PropertyDescriptionDefault Value
activeInitial state of the switch.true
disableDetermines if the switch is enabled.true
disabledTextColorColor of the text when disabled.#212121
disabledOffTintColorTint color when the switch is off and disabled.Tertiary300
disabledOnTintColorTint color when the switch is on but disabled.Success100
enabledTextColorColor of the text when enabled.#212121
enabledOffTintColorTint color when the switch is off and enabled.Tertiary400
enabledOnTintColorTint color when the switch is on and enabled.Success500
fontProviderConforms to LGNSwitchFontProvider, providing fonts for the switch label based on SizeType.nil
onToggleChangeClosure that gets called when the switch is toggled.nil
sizeSize of the switch, using the predefined SizeType.lg
sizeProviderConforms to LGNSwitchSizeProvider, defining switch sizes based on SizeType.nil
textLabelText displayed next to the switch.""

Example onToggleChange

You can use the onToggleChange property to handle the switch toggle event:

let lgnSwitch = LGNSwitch(
    active: true,
    disable: false,
    size: .lg
)
lgnSwitch.onToggleChange = { [weak self] isOn in
    print("Switch is now \(isOn ? "ON" : "OFF")")
}