Toggles

Checkboxes are pretty ugly. So let's make them pretty.

<label class="c-toggle">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle
</label>
<label class="c-toggle c-toggle--brand">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle .c-toggle--brand
</label>
<label class="c-toggle c-toggle--info">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle .c-toggle--info
</label>
<label class="c-toggle c-toggle--warning">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle .c-toggle--warning
</label>
<label class="c-toggle c-toggle--success">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle .c-toggle--success
</label>
<label class="c-toggle c-toggle--error">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle .c-toggle--error
</label>
<label class="c-toggle c-toggle--brand">
  <input type="checkbox" disabled>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle[disabled]
</label> 
Default Brand Info Warning Success Error
<blaze-toggle toggled>Default</blaze-toggle>
<blaze-toggle toggled type="brand">Brand</blaze-toggle>
<blaze-toggle toggled type="info">Info</blaze-toggle>
<blaze-toggle toggled type="warning">Warning</blaze-toggle>
<blaze-toggle toggled type="success">Success</blaze-toggle>
<blaze-toggle toggled type="error">Error</blaze-toggle> 

Attributes

Attribute Description
toggled (boolean) Initial state of the toggle
type The color of the rail

Methods

Attribute Description
isToggled() Returns true or false