--- 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 `` with the class `.switch-input`. Next to that, create a `` with the class `.switch-paddle`. Give the `` a unique ID and point the `` 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.

Inspecting the value of the underlying input should be done by evaluating the checked property of said input.

Make sure the HTML of the switch goes in the order you see above—<input>, then <label>

Watch this part in video

```html_example

``` --- ## Disabled There may be times when you want to fix a switch into a position. This can be accomplished by setting the `disabled` option on the switch input. ```html_example

``` --- ## Radio Switch You can also use `` instead of `checkbox` to create a series of options.

Watch this part in video

```html_example

```

--- ## Sizing Classes Use the classes `.tiny`, `.small`, or `.large` to change the switch size.

Watch this part in video

```html_example

``` --- ## 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 ``.

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.

Watch this part in video

Add aria-hidden="true" to these labels to prevent AT from reading them.

```html_example

Do you like me?

```