Skip to main content

Search

Search

Search

Also see /react/input#search

Styling the React Input component

Also see /react/nav#search-input

Search input for Nav component

Search with button

Suitable for big/slow server-side search.
Click search button to perform search with onIconClick.
Trigger on Enter key with onKeyPress.
If a new search is performed, overwrite results from the previous request.
When search field is empty, do nothing on button click / Enter.

Type in the search box, then click the button or hit Enter to initiate a search

Live filter

Suitable when you already have the full dataset available locally.
Result list is updated immediately while typing so there no need to press enter, have a search button, or a loading spinner.
If there is a large dataset (makes the filtering slow), consider using a debounce so you don't risk locking the UI while the user is typing.

Algrim

Clint Barton

Darcy Lewis

Destroyer

Erik Selvig

Fandral

Fenris Wolf

Frigga

Grandmaster

Heimdall

Hela

Hogun

Hulk

Jane Foster

Korg

Laufey

Loki

Malekith

Miek

Nick Fury

Odin

Phil Coulson

Sif

Skurge

Surtur

Thor

Valkyrie

Volstagg

Examples source code

View source code for the examples above in GitHub (requires authentication)

Global search hotkey

If you have an app-global search (in topbar, for example) it should be focusable using:

⌘ + K on macOS
Ctrl + K on Windows/Linux.

Also see /react/useHotkey