{{#markdown}}
When yes is selected, the container has a **.flipswitch-yes** class and the “yes” radio button is checked.
{{/markdown}}

<div id="flipswitch-sample-1" class="flipswitch flipswitch-yes">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-1"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-check"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-close"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-1"> Yes
  </label>
</div>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div id="flipswitch-sample-1" class="flipswitch flipswitch-yes">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-1"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-check"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-close"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-1"> Yes
  </label>
</div>

```
{{/markdown}}

{{> copy-code}}
</div>

{{#markdown}}
When no is selected, the container has a **.flipswitch-no** class and the “no” radio button is checked.
{{/markdown}}

<div id="flipswitch-sample-2" class="flipswitch flipswitch-no">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-2"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-check"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-close"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-2"> Yes
  </label>
</div>


<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div id="flipswitch-sample-2" class="flipswitch flipswitch-no">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-2"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-check"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-close"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-2"> Yes
  </label>
</div>

```
{{/markdown}}

{{> copy-code}}
</div>