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
| Name | Description |
|---|---|
| toggled: boolean | Initial state of the toggle |
| type | The color of the rail |
Methods
| Name | Description |
|---|---|
| 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>