Switch
Classes Information
| ClassName | Description |
|---|---|
| switch | Switch base class |
| switch-primary | Set primary color |
| switch-secondary | Set secondary color |
| switch-success | Set success color |
| switch-error | Set error color |
| switch-warning | Set warning color |
| switch-bordered-primary | With primary border by default |
| switch-bordered-secondary | With secondary border by default |
| switch-bordered-success | With success border by default |
| switch-bordered-error | With error border by default |
| switch-bordered-warning | With warning border by default |
| switch-ghost-primary | With border hover effect primary |
| switch-ghost-secondary | With border hover effect secondary |
| switch-ghost-success | With border hover effect success |
| switch-ghost-error | With border hover effect error |
| switch-ghost-warning | With border hover effect warning |
| switch-xs | Set extra small size |
| switch-sm | Set small size |
| switch-md | Set medium size |
| switch-lg | Set large size |
| switch-xl | Set extra large size |
Basic Usage
Example Code
html
<input type="checkbox" class="switch" />Colors
Example Code
html
<input type="checkbox" class="switch switch-primary" checked />
<input type="checkbox" class="switch switch-secondary" checked />
<input type="checkbox" class="switch switch-success" checked />
<input type="checkbox" class="switch switch-error" checked />
<input type="checkbox" class="switch switch-warning" checked />Bordered
Example Code
html
<input type="checkbox" class="switch switch-bordered-primary" />
<input type="checkbox" class="switch switch-bordered-secondary" />
<input type="checkbox" class="switch switch-bordered-success" />
<input type="checkbox" class="switch switch-bordered-error" />
<input type="checkbox" class="switch switch-bordered-warning" />Ghost
Example Code
html
<input type="checkbox" class="switch switch-ghost-primary" />
<input type="checkbox" class="switch switch-ghost-secondary" />
<input type="checkbox" class="switch switch-ghost-success" />
<input type="checkbox" class="switch switch-ghost-error" />
<input type="checkbox" class="switch switch-ghost-warning" />Sizes
Example Code
html
<input type="checkbox" class="switch switch-xl" />
<input type="checkbox" class="switch switch-lg" />
<input type="checkbox" class="switch switch-md" />
<input type="checkbox" class="switch switch-sm" />
<input type="checkbox" class="switch switch-xs" />Disabled
Example Code
html
<input type="checkbox" class="switch" disabled checked />