Skip to main content

Toggles

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

<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

NameDescription
toggled: booleanInitial state of the toggle
typeThe color of the rail

Methods

NameDescription
isToggled(): Promise<boolean>returns whether the checkbox is checked or not

CSS

<label class="c-toggle">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  Default
</label>
<label class="c-toggle c-toggle--brand">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  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>
  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>
  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>
  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>
  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>
  Disabled
</label>