FieldSearch

A search field built on InputField: a leading search icon, a pill-shaped ($round) border, and a clear ("reset") button that only appears once the field is focused and has a value.

React Native

import { FieldSearch } from '@hoverinc/design-system-react-native';

<FieldSearch label="Search jobs" onChangeText={setQuery} value={query} />;

label does double duty: it's both the visible placeholder text and the fallback aria-label (pass aria-label explicitly if you need the accessible name to differ from the placeholder).

Common Mistakes

• placeholder isn't accepted as a prop — it's always the label value. Passing your own placeholder won't do anything; TypeScript will flag it.
• The clear button only shows up when the field is both focused and has a non-empty value. If a "clear" affordance disappeared, check whether the field lost focus rather than assuming the component is broken.
• The field is disabled-styled via backgroundColor="$interactiveDisabled" automatically when isDisabled — don't add a manual disabled background override, it'll fight with this.
• Prefer uncontrolled usage (defaultValue) over value unless you need to drive the query from outside — this is the team's default for FieldSearch/FieldPassword. Both were added specifically to replace inconsistent bespoke search/password inputs built directly on Field.
• The pill ($round) shape is a deliberate, relatively recent design change to match Figma — don't override borderRadius back to a squarer shape expecting to match older screenshots or examples elsewhere in the app.