Component
Checkbox
A small mark that fills when it is chosen.
Classes
| Class | Type | |
|---|---|---|
| checkbox | Component | The label. |
| checkbox-box | Part | The box. The check is drawn inside it. |
| checkbox-sm | Size | Small. |
| checkbox-lg | Size | Large. |
| primary | Color | Indigo by default. Used when you set no color. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. |
| info | Color | Sky by default. |
Checked and unchecked
<label class="checkbox primary">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Remember this device
</label>Colors
<label class="checkbox primary">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Primary
</label>
<label class="checkbox secondary">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Secondary
</label>
<label class="checkbox tertiary">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Tertiary
</label>
<label class="checkbox neutral">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Neutral
</label>
<label class="checkbox success">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Success
</label>
<label class="checkbox error">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Error
</label>
<label class="checkbox warning">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Warning
</label>
<label class="checkbox info">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Info
</label>Sizes
<label class="checkbox checkbox-sm">
<input type="checkbox" checked>
<span class="checkbox-box"></span>
Small
</label>No color class means primary.