Search field

Overview

Filter or query a known data scope. It transforms operator input into a labeled domain value while preserving recoverable input through validation, delay and offline queuing.

When to use

Use HE/Search field when you need to filter or query a known data scope. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<label class="he-search"><span class="he-sr-only">Search cows</span><svg class="he-icon he-search__icon" aria-hidden="true"><use href="/assets/design-system/health-eye-icons.svg#search"></use></svg><input class="he-field__control" type="search" placeholder="Cow ID or group"></label>

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

Label the search scope and announce result counts after debounced updates.

• 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