Switch#
Ripple UI comes with a Switch component that can be used to toggle between two states.
Default#
Simple example of switch.
HTML
JSX
<input type="checkbox" class="switch" />
Colors#
Switch colors.
HTML
JSX
<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#
Switch bordered.
HTML
JSX
<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#
Switch ghost.
HTML
JSX
<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#
Switch sizes.
HTML
JSX
<input type="checkbox" class="switch switch-xs" /><input type="checkbox" class="switch switch-sm" /><input type="checkbox" class="switch switch-md" /><input type="checkbox" class="switch switch-lg" /><input type="checkbox" class="switch switch-xl" />
Disabled#
Switch disabled.
HTML
JSX
<input type="checkbox" class="switch" disabled checked />
Switch Props#
API#
| class | 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 |