Switch

Usage

Definition

The switch is a binary toggle used to turn a function on/off. The switch label can be phrased as a yes/no question, in which case the switch "answers" with yes/no.

Do not use the switch for selection between non-binary alternatives (e.g. this or that). The switch is only used to turn a function on/off.

Common Characteristics

The switch consists of a label, a UI control, and status text indicating the state of the control. Both the control and the text indicator are interactive.

The status text must be be “yes”/”no”, or “on”/”off”.

Function Label

Bidding

OFF

Question Label

Do you want to bid?

NO

Switch Label Positions

The switch supports left-, right-, or top-aligned labels.

Label left align

Do you want to bid?

OFF

Label right align

Do you want to bid?

OFF

Label top align

Do you want to bid?

OFF

Code

Default Switch

Live Editor

<Switch label="Do you want to bid?" />

<Switch label="Do you want to bid?" />

Result

Loading...

Switch Label Types

Function Label

Live Editor

<Switch label="Bidding" labelAlignment="left" statusText="OnOff" />

<Switch
    label="Bidding"
    labelAlignment="left"
    statusText="OnOff"
/>

Result

Loading...

Question Label

Live Editor

<Switch label="Do you want to bid?" labelAlignment="left" statusText="YesNo" />

<Switch
    label="Do you want to bid?"
    labelAlignment="left"
    statusText="YesNo"
/>

Result

Loading...

Switch Label Positions

The switch supports left-, right-, or top-aligned labels.

Label left align

Live Editor

<Switch label="Do you want to bid?" labelAlignment="left" />

<Switch label="Do you want to bid?" labelAlignment="left" />

Result

Loading...

Label right align

Live Editor

<Switch label="Do you want to bid?" labelAlignment="right" />

<Switch label="Do you want to bid?" labelAlignment="right" />

Result

Loading...

Label top align

Live Editor

<Switch label="Do you want to bid?" labelAlignment="top" />

<Switch label="Do you want to bid?" labelAlignment="top" />

Result

Loading...

Prop status false, switch off

Live Editor

<Switch label="Do you want to bid?" statusText="YesNo" status={false}/>

<Switch label="Do you want to bid?" statusText="YesNo" status={false}/>

Result

Loading...

Prop status true, switch on

Live Editor

<Switch label="Do you want to bid?" statusText="YesNo" status={true}/>

<Switch label="Do you want to bid?" statusText="YesNo" status={true}/>

Result

Loading...

Disabled and not checked

Live Editor

<Switch label="Do you want to bid?" disabled={true} />

<Switch label="Do you want to bid?" disabled={true} />

Result

Loading...

Disabled and checked

<Switch label="Bidding" statusText="OnOff" status={true} disabled={true} />

Prop status false, switch off

Live Editor

<Switch label="Would you like to do the thing?" statusText="OnOff" status={false}/>

<Switch label="Would you like to do the thing?" statusText="OnOff" status={false}/>

Result

Loading...

Prop status true, switch on

Live Editor

<Switch label="Would you like to do the thing?" statusText="OnOff" status={true}/>

<Switch label="Would you like to do the thing?" statusText="OnOff" status={true}/>

Result

Loading...

Switch Props

property	propType	required	default	description
disabled	bool	no	false	Determines whether or not the switch appears to be disabled and is unclickable.
label	string	yes	-	Controls the text that will appear in the text label associated with the switch
labelAlignment	'top' | 'left' | 'right'	no	left	Determines whether the text label associated with switch appears to the left of the containing element, to the immediate right of the switch itself regardless of containing element, or on top of the switch.
onChange	func	no	-	Enables the consumer of this component to hook into the onChange event when toggled.
status	bool	no	false	If status is false the switch will be in left most position, if true it will be in right most
statusText	'OnOff' | 'YesNo'	yes	OnOff	Determines the text that will appear to the right of the switch
size	'lg' | 'md' | 'sm'	no	'md'	Enables the label size to large 'lg' or small 'sm'
readonly	bool	no	false	Enables the readonly State