# Switch

An on and off switch for a setting, with the state written next to it. It applies when the person saves, like any field.

## Playground

```html
<label class="feitio-switch" data-on="On" data-off="Off"><input type="checkbox" role="switch">E-mail notices<span class="state">Off</span></label>
```

## When to use

-   To turn a setting on or off on a settings page: reminders, a notification, a feature.

## When not to use

-   **To agree to something** (terms, permissions): Checkbox.
-   **To choose between options:** Radios or SegmentedControl.

## Examples

### In a settings form

The switch changes the written state right away, but the setting only applies when the person saves; feedback shows on the form.

Show code

```html
<label class="feitio-switch">
  <input type="checkbox" role="switch" name="lembretes" checked>
  Lembretes do dia
  <span class="state">Ligado</span>
</label>
```

## States

Off

RemindersOff

On

RemindersOn

Disabled

RemindersOff

## Accessibility

-   It is a checkbox with `role="switch"`: screen readers announce "on" or "off".
-   The state is also written next to it: the dot’s position is not enough.

## Attributes

Attribute

Values

What for

`class="feitio-switch"`

on the `<label>`

The switch, the text and the state.

`role="switch"`

on the input

Screen readers announce on or off.

`class="state"`

the state

"On" or "Off", in words.