This component is used to toggle the state of a single setting on or off.
You can play around with a Ui.Toggle below using the controls.
Ui.Toggle
<Ui.Toggle width={Ui.Size.Em(5.5)} size={Ui.Size.Px(16)} disabled={false} checked={false} offLabel="OFF" onLabel="ON"/>
The the labels can be controlled by the onLabel and offLabel properties.
onLabel
offLabel
<> <Ui.Toggle checked={false} offLabel="" onLabel=""/> <Ui.Toggle checked={false} offLabel="NO" onLabel="YES"/> <Ui.Toggle width={Ui.Size.Em(11)} offLabel="ENABLED" onLabel="DISABLED" checked={true} /></>
The state of the component can be set with the checked property.
checked
<> <Ui.Toggle checked={false}/> <Ui.Toggle checked={true}/></>
The size of the component can be set with the size property.
size
<> <Ui.Toggle size={Ui.Size.Px(12)}/> <Ui.Toggle size={Ui.Size.Px(16)}/> <Ui.Toggle size={Ui.Size.Px(20)}/></>
Since we cannot accuratly measure the size of the labels, the width of the component needs to be set manually using the width property.
width
<> <Ui.Toggle width={Ui.Size.Em(6)}/> <Ui.Toggle width={Ui.Size.Em(10)}/> <Ui.Toggle width={Ui.Size.Em(14)}/></>
The component can be disabled using the disabled property.
disabled
<> <Ui.Toggle disabled={true} checked={false}/> <Ui.Toggle disabled={true} checked={true}/></>
The component triggers the onChange event when clicked.
onChange
<Ui.Toggle onChange={ (value : Bool) { Ui.Notifications.notifyDefault(<>Bool.toString(value)</>) } }/>
Mint UI is a design system and component library for building websites, web and desktop applications.