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

Usage

Switch are used for activating one of two predefined options

Use Legion switch to modify the responsive toggle buttons that supports default and small sizes, and an optional text label on its right side etc.

Usage Default LegionUI

Switch(initialValue: true)

Usage Theme

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

LGNSwitch(initialValue: true)

Variant

Legion Have 2 Variant of Switch :

Expand ON
Default Legion UI
      
Switch(initialValue: true, onToggleChange: {value in print(value)} )
Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      
LGNSwitch(initialValue: true, onToggleChange: {value in print(value)} )
Expand OFF
Default Legion UI
      
Switch(initialValue: false, onToggleChange: {value in print(value)} )
Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      
LGNSwitch(initialValue: false, onToggleChange: {value in print(value)} )

Attribute

Legion Have 3 Attributes for Customize Switch :

Size

Small
Default Legion UI
      
Switch(initialValue: true, sizeType: LGNSwitch.SizeType.small, onToggleChange: {newValue in print(value)} ){" "}
Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      
LGNSwitch(initialValue: true, sizeType: LGNSwitch.SizeType.small, onToggleChange: {newValue in print(value)}{" "}
){" "}
Default
Default Legion UI
      
Switch(initialValue: true, sizeType: LGNSwitch.SizeType.default, onToggleChange: {newValue in print(value)}{" "}
){" "}
Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)
      
LGNSwitch(initialValue: true, sizeType: LGNSwitch.SizeType.default, onToggleChange: {newValue in print(value)}{" "}
){" "}

Disable

This code sample demonstrates how to modify disable of the switch :

Legion UI

Switch(
initialValue: true,
isDisabled: .constant(true)
)

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

LGNSwitch(
initialValue: true,
isDisabled: .constant(true)
)

Label

This code sample demonstrates how to modify label of the button :

Legion UI

LGNSwitch("Label", initialValue: true, isDisabled: .constant(true))

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

LGNSwitch(
"Label",
initialValue: true,
isDisabled: .constant(true)
)

Properties

PropertiesDescriptionDefault Value
textThe text that should appear on the right side of the swiftnil
initialValueThe initial state of the Switch. Whether it is turned on (true) or off (false)required or no default value
sizeTypeThe size of the toggle Either .default or .small.default
fontFamilyA string of font family nameNurito-Sans
textForegroundColorA color to be used for the text label on the right, when the view is not disabledColor.LGNTheme.tertiary800
textDisabledColorA color to be used for the text label on the right, when the view is disabledColor.LGNTheme.tertiary50
isDisabledA binding boolean to enable disable the component.constant(false)
onToggleChangeThe action to perform when user toggles the switch.nil
Function NameDescription
setTintColorThe LGNSwitch can change the tint color of the switch
animateBeamEffectWhenToggleOn()The LGNSwitch can be animated like beam effect when the toggle change from off to on
animateBounceWhenToggleOn()The LGNSwitch can be animated like bouncing when the toggle change from off to on

Example Project

LegionUI

Switch(
"Label",
initialValue: true,
sizeType: .default,
fontFamily: "NunitoSans-Bold",
textForegroundColor: Color.LGNTheme.tertiary800,
textDisabledColor: Color.LGNTheme.tertiary500,
isDisabled: .constant(false),
onToggleChange: { value in

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

Switch(
"Label",
initialValue: true,
sizeType: .default,
fontFamily: "NunitoSans-Bold",
textForegroundColor: Color.LGNTheme.tertiary800,
textDisabledColor: Color.LGNTheme.tertiary500,
isDisabled: .constant(false),
onToggleChange: { value in