Ui.Toggle

This component is used to toggle the state of a single setting on or off.

Interactive Demo

You can play around with a Ui.Toggle below using the controls.

On Label
Off Label
checked
disabled
Size (16px)
Width (5.5em)
<Ui.Toggle
width={Ui.Size.Em(5.5)}
size={Ui.Size.Px(16)}
disabled={false}
checked={false}
offLabel="OFF"
onLabel="ON"/>
Labels

The the labels can be controlled by the onLabel and offLabel properties.

<>
<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}
/>
</>
State

The state of the component can be set with the checked property.

<>
<Ui.Toggle checked={false}/>
<Ui.Toggle checked={true}/>
</>
Size

The size of the component can be set with the size property.

<>
<Ui.Toggle size={Ui.Size.Px(12)}/>
<Ui.Toggle size={Ui.Size.Px(16)}/>
<Ui.Toggle size={Ui.Size.Px(20)}/>
</>
Width

Since we cannot accuratly measure the size of the labels, the width of the component needs to be set manually using the width property.

<>
<Ui.Toggle width={Ui.Size.Em(6)}/>
<Ui.Toggle width={Ui.Size.Em(10)}/>
<Ui.Toggle width={Ui.Size.Em(14)}/>
</>
Disabled

The component can be disabled using the disabled property.

<>
<Ui.Toggle disabled={true} checked={false}/>
<Ui.Toggle disabled={true} checked={true}/>
</>
Change Event

The component triggers the onChange event when clicked.

<Ui.Toggle
onChange={
(value : Bool) { Ui.Notifications.notifyDefault(<>Bool.toString(value)</>) }
}
/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.