Checkbox Module

The Checkbox module provides customizable checkbox inputs with configurable colors, border, radius, checked state, focus state, disabled state, and RTL/LTR support.

Primary Checkbox Shade Checkbox Invalid Checkbox Disabled Checkbox

Signature:

@mixin use-checkbox($colors: ());

Example:

@include termeh.use-checkbox(("primary", "error"));

Dependencies

Checkbox module uses the following Termeh global var():

Component	Type	Usage	Default
base → separator	Color	Fallback border color	null
radius → normal	Number	Default input border radius	null
gap → micro	Number	Spacing between input and label	8px
input → height	Number	Input height	2.8em
input → checkbox	Number	Checkbox item height	1.2em
input → border	Color	Default input border color	FALLBACK
input → disabled-foreground	Color	Disabled input accent color	null
input → disabled-border	Color	Disabled input border color	null

---

Checkbox module uses the following Termeh color():

Color / Variant	Usage	Default
error	Accent color for invalid state	error
primary	Default accent color	error

Modifiers

• .is-invalid / :invalid → applies error styling with shake animation
• .is-disabled / :disabled → applies disabled styling
• .is-<color> → applies a registered color as accent color

Child Elements

• input[type="checkbox"] → the checkbox input element