Radio Module

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

Primary Radio Shade Radio Invalid Radio Disabled Radio

Signature:

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

Example:

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

Dependencies

Radio 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	Radio 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

---

Radio 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="radio"] → the radio input element