FrontAlign Logo
Ctrl + K

Checkbox

FrontAlign checkboxes are built directly on native <input type="checkbox"> elements — no JavaScript, no synthetic controls. Custom appearance is applied via CSS, so they remain fully accessible, keyboard-navigable, and form-serializable out of the box.

Basic Usage

Wrap a .form-checkbox and its label inside .group-checkbox. The label follows the input in the DOM so the spacing and alignment utilities work correctly.

<div class="group-checkbox">
  <input class="form-checkbox" id="terms" type="checkbox" />
  <label class="form-label" for="terms">I agree to the terms and conditions</label>
</div>

<div class="group-checkbox">
  <input class="form-checkbox" id="newsletter" type="checkbox" checked />
  <label class="form-label" for="newsletter">Subscribe to newsletter</label>
</div>

Inline Layout

Add .group-inline to .group-checkbox to place the control and its label side by side on one line. Stack multiple inline groups in a flex row for a horizontal option list.

<div class="is-flex flex-wrap gap-3">
  <div class="group-checkbox group-inline">
    <input class="form-checkbox" id="feat-dark" type="checkbox" />
    <label class="form-label" for="feat-dark">Dark mode</label>
  </div>
  <div class="group-checkbox group-inline">
    <input class="form-checkbox" id="feat-rtl" type="checkbox" checked />
    <label class="form-label" for="feat-rtl">RTL support</label>
  </div>
  <div class="group-checkbox group-inline">
    <input class="form-checkbox" id="feat-a11y" type="checkbox" />
    <label class="form-label" for="feat-a11y">Accessibility</label>
  </div>
</div>

Size Variants

Checkboxes support is-small, is-medium, and is-large to scale the control glyph independently of the label text.

<div class="group-checkbox group-inline">
  <input class="form-checkbox" id="sz-chk-md" type="checkbox" checked />
  <label class="form-label" for="sz-chk-md">Default</label>
</div>

<div class="group-checkbox group-inline">
  <input class="form-checkbox is-medium" id="sz-chk-lg" type="checkbox" checked />
  <label class="form-label" for="sz-chk-lg">Medium</label>
</div>

<div class="group-checkbox group-inline">
  <input class="form-checkbox is-large" id="sz-chk-xl" type="checkbox" checked />
  <label class="form-label" for="sz-chk-xl">Large</label>
</div>

Customize Color

For the color of all form elements, use --accent and --accent-constrast. By default, accent takes its value from --primary. The style of all form elements will be styled from --primary. However, if you want to separate and differentiate this design, provide a separate value for --accent.

:root {
    --accent:#f5db13;
}

Custom Icons

The checked glyph is exposed as a CSS custom property — --check-icon — so you can swap the default tick for any inline SVG without touching the framework's source. This is the recommended way to build things like a "save this item" toggle, a favorite/heart toggle, or a rating control that still behaves like a real, form-serializable checkbox under the hood.

<!-- Default tick, unchanged -->
<div class="group-checkbox group-inline">
  <input class="form-checkbox" id="icon-default" type="checkbox" checked />
  <label class="form-label" for="icon-default">Default</label>
</div>

<!-- Heart icon -->
<div class="group-checkbox group-inline">
  <input
    class="form-checkbox"
    id="icon-heart"
    type="checkbox"
    checked
    style="--check-icon: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27%23fff%27 d=%27M10 17s-6.5-4.1-6.5-8.5C3.5 5.9 5.5 4 7.8 4c1.2 0 2.2.6 2.2 1.6C10 4.6 11 4 12.2 4c2.3 0 4.3 1.9 4.3 4.5C16.5 12.9 10 17 10 17z%27/%3E%3C/svg%3E')"
  />
  <label class="form-label" for="icon-heart">Favorite</label>
</div>

<!-- Star icon -->
<div class="group-checkbox group-inline">
  <input
    class="form-checkbox"
    id="icon-star"
    type="checkbox"
    checked
    style="--check-icon: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27%23fff%27 d=%27M10 1l2.6 5.9L19 7.6l-4.6 4.5L15.5 19 10 15.6 4.5 19l1.1-6.9L1 7.6l6.4-.7z%27/%3E%3C/svg%3E')"
  />
  <label class="form-label" for="icon-star">Starred</label>
</div>

<!-- Save icon -->
<div class="group-checkbox group-inline">
  <input
    class="form-checkbox"
    id="icon-save"
    type="checkbox"
    checked
    style="--check-icon: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linejoin=%27round%27 d=%27M3 3h11l3 3v11H3z%27/%3E%3Crect x=%276%27 y=%273%27 width=%276%27 height=%274%27 fill=%27%23fff%27/%3E%3Crect x=%275%27 y=%2712%27 width=%2710%27 height=%275%27 fill=%27%23fff%27/%3E%3C/svg%3E')"
  />
  <label class="form-label" for="icon-save">Saved</label>
</div>

Disabled State

A disabled checkbox is non-interactive, reduced to 65% opacity, and shows an × glyph to communicate unavailability clearly.

<!-- Disabled unchecked -->
<div class="group-checkbox">
  <input class="form-checkbox" id="chk-dis-off" type="checkbox" disabled />
  <label class="form-label" for="chk-dis-off">Disabled option</label>
</div>

<!-- Disabled checked -->
<div class="group-checkbox">
  <input class="form-checkbox" id="chk-dis-on" type="checkbox" checked disabled />
  <label class="form-label" for="chk-dis-on">Locked selection</label>
</div>

Class Reference

ClassElementPurpose
.group-checkboxWrapperVertical spacing and alignment container for a checkbox + label pair.
.group-inlineModifier on wrapperRenders the control and label on a single horizontal line using inline-flex.
.form-checkboxinput[type="checkbox"]Custom checkbox with checked SVG, focus ring, and validation states.
.checkbox-invalid / .checkbox-valid.form-checkboxManual validation state classes. Also colors the adjacent label.
.is-small / .is-medium / .is-large.form-checkboxScales the control glyph size independently of the label.
--check-icon.form-checkboxCSS custom property holding the checked-state glyph as an SVG data URI. Override inline or on a custom class to swap the default tick for any icon.
Icon Input
Range

FrontAlign