Toggle switch

The toggle switch can be either checkbox or radio, it depends on the use-case and what you want to do.

Validation

There are .valid, .warning and .invalid classes for validation. You can add them to .toggle-wrapper.

Checkbox toggle

All toggles can be checked.

index.html

<label class="toggle-wrapper">
  <input type="checkbox" name="the-toggle" role="switch" checked />
  <span class="check"></span>
  High contrast text
</label>

<label class="toggle-wrapper">
  <input type="checkbox" name="the-toggle" role="switch" />
  <span class="check"></span>
  Night light
</label>

<label class="toggle-wrapper">
  <input type="checkbox" name="the-toggle" role="switch" />
  <span class="check"></span>
  Color correction
</label>

Radio toggle

One of them can be checked, note that radios' name attribute should be the same.

index.html

<label class="toggle-wrapper heart size-lg">
  <input type="radio" name="the-toggle" role="switch" checked />
  <span class="check"></span>
  <!-- SVG -->
</label>
<label class="toggle-wrapper brain size-lg">
  <!-- SVG -->
  <input type="radio" name="the-toggle" role="switch" />
  <span class="check"></span>
</label>

style.css

.toggle-wrapper svg {
  width: 2em;
  height: 2em;
  fill: #809cb6;
}

.brain .check {
  margin-left: 0.5em;
}

Sizes

To change the toggle switch size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS. Do not forget to add class to the wrapper to change label size as well.

index.html

<label class="toggle-wrapper size-xs">
  <input type="checkbox" name="the-toggle" role="switch" checked />
  <span class="check"></span>
  High contrast text
</label>

<label class="toggle-wrapper">
  <input type="checkbox" name="the-toggle" role="switch" checked />
  <span class="check"></span>
  High contrast text
</label>

<label class="toggle-wrapper size-2x">
  <input type="checkbox" name="the-toggle" role="switch" checked />
  <span class="check"></span>
  High contrast text
</label>

<label class="toggle-wrapper size-3x">
  <input type="checkbox" name="the-toggle" role="switch" checked />
  <span class="check"></span>
  High contrast text
</label>

Customization

There are CSS variables for customizing radios:

--flatify__form-element-accent-color
--flatify__form-element-bg-color
--flatify__form-element-txt-color
--flatify__form-element-border-color
--flatify__form-element-border-color__focus
--flatify__form-element-border-color__valid
--flatify__form-element-border-color__warning
--flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css

.toggle-wrapper {
  --flatify__form-element-accent-color: #37bc9b;
  --flatify__form-element-bg-color: #ffce54;
  --flatify__form-element-txt-color: #434a54;
  --flatify__form-element-border-color: #e0c341;
  --flatify__form-element-border-color__focus: #f6bb42;
  --flatify__form-element-border-color__valid: #5d9cec;
  --flatify__form-element-border-color__warning: #8067b7;
  --flatify__form-element-border-color__invalid: #bf263c;
}