1. Docs
  2. Components
  3. Toggles
Buy Now Contact

Toggles

(Yes or No) Style toggles.


<div class="c-toggle u-mb-small">
    <div class="c-toggle__btn is-active">
        <label class="c-toggle__label" for="toggle1">
            <input class="c-toggle__input" id="toggle1" name="toggles" type="radio" checked>Yes
        </label>
    </div>
    <div class="c-toggle__btn">
        <label class="c-toggle__label" for="toggle2">
           <input class="c-toggle__input" id="toggle2" name="toggles" type="radio">No
        </label>
    </div>
</div><!-- // .c-toggle -->

Disabled

Indicate that toggle options aren’t available.


<div class="c-toggle is-disabled">
    <div class="c-toggle__btn">
        <label class="c-toggle__label" for="toggle3">
            <input class="c-toggle__input" id="toggle3" name="toggles-disabled" type="radio" disabled>Yes
        </label>
    </div>
    <div class="c-toggle__btn">
        <label class="c-toggle__label" for="toggle4">
            <input class="c-toggle__input" id="toggle4" name="toggles-disabled" type="radio" disabled>No
        </label>
    </div>
</div><!-- // .c-toggle -->

Contents: