biofriction-wp-theme/node_modules/foundation-sites/docs/pages/switch.md

151 lines
5.7 KiB
Markdown
Raw Permalink Normal View History

2021-10-26 14:18:09 +02:00
---
title: Switch
description: Create pure CSS3 On/Off switches with animated transitions. Now you can tell your users to flip the switch or switch off.
video: 'AEL2Mj0DT3o'
sass: scss/components/_switch.scss
---
## 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.
<div class="primary callout">
<p>Inside the switch label is screen reader-only text, which uses the <code>.show-for-sr</code> class to visually mask the text.</p>
</div>
<div class="primary callout">
<p>Inspecting the value of the underlying input should be done by evaluating the <code>checked</code> property of said input.</p>
</div>
<div class="callout warning">
<p>Make sure the HTML of the switch goes in the order you see above&mdash;<code>&lt;input&gt;</code>, then <code>&lt;label&gt;</code></p>
</div>
<p>
<a class="" data-open-video="0:30"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/aWGpGg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<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.
<p>
<a class="" data-open-video="4:17"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/GmdrYW?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<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>
```
<div class="switch">
<input class="switch-input" id="exampleRadioSwitch2" type="radio" name="testGroup">
<label class="switch-paddle" for="exampleRadioSwitch2">
<span class="show-for-sr">Charmander</span>
</label>
</div>
<div class="switch">
<input class="switch-input" id="exampleRadioSwitch3" type="radio" name="testGroup">
<label class="switch-paddle" for="exampleRadioSwitch3">
<span class="show-for-sr">Squirtle</span>
</label>
</div>
---
## Sizing Classes
Use the classes `.tiny`, `.small`, or `.large` to change the switch size.
<p>
<a class="" data-open-video="6:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/mmLRgm?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<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>`.
<div class="primary callout">
<p>Depending on the length of the words you place inside the switch, you may need to fine-tune the <code>left</code> or <code>right</code> CSS properties of the text to get it positioned right.</p>
</div>
<a class="" data-open-video="8:07"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
<div class="primary callout">
<p>Add <code>aria-hidden="true"</code> to these labels to prevent AT from reading them.</p>
</div>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/qmYRzb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<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>
```