Component
Checkbox
A small mark that fills when it is chosen.
Import jellyfy/checkbox.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.
Classes
| Class | Type | |
|---|---|---|
| checkbox | Component | The label. |
| checkbox-box | Part | The box. The check is drawn inside it. |
| checkbox-sm | Size | Small size |
| checkbox-md | Size | Medium size (default) |
| checkbox-lg | Size | Large size |
| primary | Color | Indigo by default. |
| 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>With no color class, the box stays plain. A slot fills the chosen box with that control color. A disabled checkbox uses the disabled colors in both the checked and unchecked states.