Select

Overview

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

When to use

Use HE/Select when you need to choose one option from a bounded list. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div class="he-field"><span class="he-field__label" id="region-label">Region</span><select class="he-select" data-he-select aria-labelledby="region-label"><option>Munster</option><option>Leinster</option></select></div>

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

Use the HealthEye combobox/listbox contract: persistent label, announced value and expanded state, Arrow/Home/End/typeahead navigation, Enter/Space commit, Escape cancel, 44 px targets and a native form-value fallback.

• 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