Toggles

Toggles give users control over a feature or option that can be turned on or off.

Code

Toggles are offered with the following property variables:

PropTypeDefaultNotes
value
bool
Determines active inactive toggle state. Value props is required
onToggle
Function
noop
Fired on when toggle is clicked
onClick
Function
noop
Fired on when toggle is clicked
disabled
bool
false
Determines toggle disabled state
size
string
large
Determines toggle size - small and large

24px - Height

Default
24px Height
Disabled - On
24px Height
Disabled - Off
24px Height
Code
<div>
  <Toggle value />
  <Toggle
    disabled
    value={false}
   />
  <Toggle
    disabled
    value
   />
</div>

16px - Height

Default
16px Height
Disabled - On
16px Height
Disabled - Off
16px Height
Code
<div>
  <Toggle
    size='small'
    value
   />
  <Toggle
    disabled
    size='small'
    value={false}
   />
  <Toggle
    disabled
    size='small'
    value
   />
</div>