Form

Search Bar

A search bar allows users to search a large set of data by entering keywords. A list of matching items is then returned.
1
import {SearchBar} from '@coveord/plasma-react';
2
import {useState} from 'react';
3
4
const Demo = () => {
5
const [isSearching, setSearching] = useState(false);
6
const [value, setValue] = useState('');
7
8
return (
9
<SearchBar
10
id="search-bar-1"
11
placeholder="Search for something..."
12
value={value}
13
disabled={false}
14
searching={isSearching}
15
onChange={(event) => setValue(event.target.value)}
16
onSearch={() => {
17
setSearching(true);
18
setTimeout(() => {
19
setSearching(false);
20
}, 800);
21
}}
22
/>
23
);
24
};
25
export default Demo;

Props

NameTypeDefaultDescription
idrequiredstring
The unique identifier of the SearchBar
onSearchrequired(filterText: string) => void
A callback function executed when a search is performed by either pressing Enter or clicking on the icon.
  • filterTextThe current value
containerClassNamesIClassName
Additional CSS classes to set on the outermost element
disabledbooleanfalse
Whether the SearchBar is disabled. If disabled, it cannot be interracted with
disabledOnMountbooleanfalse
If true, the search bar will be disabled in the UI and in the state on mount.
inputClassNamesIClassName
Additional CSS classes to set on the inner input element
maxWidthstring"500px"
The maximum width of the SearchBar
minWidthstring"500px"
The minimum width of the SearchBar
onChange(event: ChangeEvent<HTMLInputElement>) => void
A callback function executed when the text in the SearchBar changes
  • eventThe change event
onMount() => void
A callback function executed when the component is mounted to the DOM
onUnmount() => void
A callback function executed when the component is unmounted from the DOM
placeholderstring
The text displayed inside the search bar when it is empty
searchingbooleanfalse
Whether a search is being performed. If true, a loading icon appears to indicate something is happening.
valuestring""
The value of the search bar. In other words, this is the text currently enterred in the SearchBar.

No guidelines exist for SearchBar yet.

Create guidelines