Camel2.0 — Dokumentacja komponentów UI

2.7 #Components.Checkbox Checkbox

Toggle example guides Toggle HTML markup

Niestandardowy checkbox z ukrytym natywnym inputem i wizualnym indicatorem. CSS-only checkmark (pseudo-element). Stany: checked, disabled, error, blocked, focus.

Examples
Default styling
.checkbox--error
Border czerwony (walidacja)
.checkbox--blocked
Zablokowany (szary, checked, nie do odznaczenia)
Markup: checkbox.html 
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
  <!-- Default -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Default</span>
  </label>

  <!-- Disabled -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" disabled />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Disabled</span>
  </label>

  <!-- Error -->
  <label class="checkbox checkbox--error">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Error</span>
  </label>

  <!-- Selected -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" checked />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Selected</span>
  </label>

  <!-- Blocked -->
  <label class="checkbox checkbox--blocked">
    <input type="checkbox" class="checkbox__control" checked />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Blocked</span>
  </label>

  <!-- Focus -->
  <label class="checkbox">
    <input type="checkbox" class="checkbox__control" />
    <span class="checkbox__indicator"></span>
    <span class="checkbox__label">Focus (Tab)</span>
  </label>
</div>
Source: src/scss/components/_checkbox.scss, line 1