Radio

Overview

Choose exactly one option from a visible group. It transforms operator input into a labeled domain value while preserving recoverable input through validation, delay and offline queuing.

When to use

Use HE/Radio when you need to choose exactly one option from a visible group. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<fieldset class="he-choice-group"><legend>Telemetry policy</legend><label class="he-radio"><input type="radio" name="p" checked> Adaptive</label><label class="he-radio"><input type="radio" name="p"> Fixed</label></fieldset>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Wrap options in a named radio group and use arrow-key navigation.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components