Checkbox

npm install @vrembem/checkbox

@use "@vrembem/checkbox";

Options

Checkbox uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-checkbox-color

var(--vb-form-control-choice-color)

--vb-checkbox-accent

var(--vb-form-control-choice-accent)

--vb-checkbox-fill

var(--vb-form-control-choice-fill)

--vb-checkbox-font-size

var(--vb-form-control-font-size)

--vb-checkbox-border-width

2px

--vb-checkbox-border-radius

0.25em

--vb-checkbox-icon-size

0.8em

Basic usage

Checkbox form controls are composed using the <input type="checkbox"> element along with the .checkbox class.

<input class="checkbox" type="checkbox" />

// Get checkboxes with "mixed" status
const checkboxes = document.querySelectorAll(
  "input[type='checkbox'][aria-checked='mixed']"
);

// Apply the indeterminate state
checkboxes.forEach((checkbox) => checkbox.indeterminate = true);

Indeterminate checkboxes need to be set in JavaScript though styling is provided by Vrembem for the indeterminate states (see example above). Review MDN documentation for more details.

Labels

For checkboxes with labels, wrap the checkbox element along with the text label using the <label> element.

<label>
  <input class="checkbox" type="checkbox" />
  <span>Checkbox with a label</span>
</label>

Disabled

Adding the boolean disabled attribute to the input element will provide visual indication that the checkbox is not available for use.

<input class="checkbox" type="checkbox" disabled />

Invalid

Adding the is-invalid class or aria-invalid="true" attribute to the checkbox component will provide visual indication that the form-control value is invalid. Invalid state is also triggered by the native :user-invalid state.

<input class="checkbox is-invalid" type="checkbox" />