Switch
Now you can tell your users to flip the switch or switch off.
Basics
Add the .switch class to an element to create a switch. Inside the switch, add an <input type="checkbox"> with the class .switch-input. Next to that, create a <label> with the class .switch-paddle.
Give the <input> a unique ID and point the <label> to it with the for attribute. This makes the switch clickable.
Inside the switch label is screen reader-only text, which uses the .show-for-sr class to visually mask the text.
Make sure the HTML of the switch goes in the order you see above—<input>, then <label>
<div class="switch">
<input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">Download Kittens</span>
</label>
</div>
Radio Switch
You can also use <input type="radio"> instead of checkbox to create a series of options.
<div class="switch">
<input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
<label class="switch-paddle" for="exampleRadioSwitch1">
<span class="show-for-sr">Bulbasaur</span>
</label>
</div>
Sizing Classes
Use the classes .tiny, .small, or .large to change the switch size.
<div class="switch tiny">
<input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="tinySwitch">
<span class="show-for-sr">Tiny Sandwiches Enabled</span>
</label>
</div>
<div class="switch small">
<input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="smallSwitch">
<span class="show-for-sr">Small Portions Only</span>
</label>
</div>
<div class="switch large">
<input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="largeSwitch">
<span class="show-for-sr">Show Large Elephants</span>
</label>
</div>
Inner Labels
You can place active and inactive text inside of a switch. The active text (.switch-active) only displays when the switch is on, and the inactive text (.switch-inactive) only displays when the switch is off.
Active/inactive text goes inside of the switch's <label>.
Depending on the length of the words you place inside the switch, you may need to fine-tune the left or right CSS properties of the text to get it positioned right.
Add aria-hidden="true" to these labels to prevent AT from reading them.
<p>Do you like me?</p>
<div class="switch large">
<input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="yes-no">
<span class="show-for-sr">Do you like me?</span>
<span class="switch-active" aria-hidden="true">Yes</span>
<span class="switch-inactive" aria-hidden="true">No</span>
</label>
</div>
Do you like me?
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$switch-background |
Color | $medium-gray |
Background color of a switch. |
$switch-background-active |
Color | $primary-color |
Background active color of a switch. |
$switch-height |
Number | 2rem |
Height of a switch, with no class applied. |
$switch-height-tiny |
Number | 1.5rem |
Height of a switch with .tiny class. |
$switch-height-small |
Number | 1.75rem |
Height of a switch with .small class. |
$switch-height-large |
Number | 2.5rem |
Height of a switch with .large class. |
$switch-radius |
Number | $global-radius |
Border radius of the switch |
$switch-margin |
Number | $global-margin |
border around a modal. |
$switch-paddle-background |
Color | $white |
Background color for the switch container and paddle. |
$switch-paddle-offset |
Number | 0.25rem |
Spacing between a switch paddle and the edge of the body. |
$switch-paddle-radius |
Number | $global-radius |
border radius of the switch paddle |
$switch-paddle-transition |
Number | all 0.25s ease-out |
switch transition. |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
switch-container
@include switch-container;Adds styles for a switch container. Apply this to a container class.
switch-input
@include switch-input;Adds styles for a switch input. Apply this to an <input> within a switch.
switch-paddle
@include switch-paddle;Adds styles for the background and paddle of a switch. Apply this to a <label> within a switch.
switch-text
@include switch-text;Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch <label>.
switch-text-active
@include switch-text-active;Adds styles for the active state text within a switch.
switch-text-inactive
@include switch-text-inactive;Adds styles for the inactive state text within a switch.
switch-size
@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$font-size |
Number | 1rem |
Font size of label text within the switch. |
$width |
Number | 4rem |
Width of the switch body. |
$height |
Number | 2rem |
Height of the switch body. |
$paddle-width |
Number | 1.5rem |
Width of the switch paddle. |
$paddle-offset |
Number | 0.25rem |
Spacing between the switch paddle and the edge of the switch body. |
