Switch
New! This component was just added to Kelp. Enjoy!
Let users turn an option on or off.
Switch Checkbox
Turn any [type="checkbox"] input into a switch by adding the [role="switch"] attribute.
<label for="magic">
<input
type="checkbox"
name="magic"
id="magic"
role="switch"
>
Allow magic
</label>Include the [checked] attribute to have the switch toggled on by default.
<label for="magic">
<input
type="checkbox"
name="magic"
id="magic"
role="switch"
checked
>
Allow magic
</label>Colors
You can adjust the active state color of a switch using the .primary, .secondary, .success, .danger, and .warning classes.
By default, it uses the .primary color for its active state.
<label for="spells">
<input
type="checkbox"
class="secondary"
id="spells"
role="switch"
checked
>
Allow spells
</label>
<label for="items">
<input
type="checkbox"
class="success"
id="items"
role="switch"
checked
>
Allow magic items
</label>
<label for="wands">
<input
type="checkbox"
class="danger"
id="wands"
role="switch"
checked
>
Allow wands
</label>
<label for="books">
<input
type="checkbox"
class="warning"
id="books"
role="switch"
checked
>
Allow spell books
</label>Disabled Switches
Disable a switch by adding the [disabled] attribute.
<label for="disabled-off">
<input
type="checkbox"
name="disabled-off"
id="disabled-off"
role="switch"
disabled
>
Disabled in off position
</label>
<label for="disabled-on">
<input
type="checkbox"
id="disabled-on"
role="switch"
checked
disabled
>
Disabled in on position
</label>Grouping Switches
Just like with a standard checkbox, use the <fieldset> element to group a set of related switches together. Include a <legend> element inside it to label the set of inputs.
<fieldset>
<legend>Options and Settings</legend>
<label for="spells-2">
<input
type="checkbox"
id="spells-2"
role="switch"
checked
>
Allow spells
</label>
<label for="items-2">
<input
type="checkbox"
id="items-2"
role="switch"
>
Allow magic items
</label>
<label for="wands-2">
<input
type="checkbox"
id="wands-2"
role="switch"
>
Allow wands
</label>
</fieldset>