Search for a place. Choose an exact location.
The same text field, with suggestions supplied by an app’s search service.
Weather location
Choose where to show your forecast.
Illustrative local results with a simulated delay. No location service is contacted.
What the app knows
No location chosen yet.
selection: null
Typing is not selecting. Writing “Paris” changes the query. Choosing a row identifies one particular Paris.
The name is not the ID. Both cities display “Paris,” but their keys identify different locations. The app uses that key to look up coordinates.
The service decides what matches. Try “NYC.” A service can return “New York,” even though that label does not contain “NYC.” Mica’s current substring filter would hide it.
Existing Mica controls
API
The app fetches results and supplies keys, labels, and status text.
<Combobox filter="manual" status={status} onOptionSelect={({ key }) => {
const location = resultsByKey.get(key);
// The application owns coordinates, fetching, and saving.
}}>
<ComboboxInput aria-label="Location" value={query} onChange={search} />
<ComboboxOptions>
<option value="Paris" data-key="paris-fr" label="Île-de-France, France" />
<option value="Paris" data-key="paris-tx" label="Texas, United States" />
</ComboboxOptions>
</Combobox>
// Choosing a result also fires the input's change (a controlled value
// follows); only event.nativeEvent.isTrusted input is a new query.