Search
A specialised TextInputwith a leading magnifier and a trailing clear button when filled. Aligned with J&J DS v1.2 (Figma 22473:9204). For an autocomplete dropdown, pair with a ComboBox.
Sizes
Show sourceHide source
<Search size="md" placeholder="Search by manufacturer, drug type or provider" />Controlled — clear callback
The clear button calls `onClear` when present and resets the value to empty.
Query: “”
Show sourceHide source
const [q, setQ] = useState("");
<Search value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ("")} />With Field — label + states
By name, MRN, or DOB
Search returned no results
Show sourceHide source
<Field label="Find a patient" status="error" message="Search returned no results">
<Search defaultValue="UNKNOWN" />
</Field>