Plasma Design System
Home
Foundations
Typekit
Links
Spacing
Layout
Banner
Blankslate
Bordered line
Browser preview
Chart
Child form
Collapsible
Icon card
Info box
Labeled value
Limit card
Modal
Modal wizard
Page header
Section
Split layout
Sticky footer
Table
Form
Actionable item
Button
Checkbox
Code editor
Color picker
Countdown
Date picker
Diff viewer
Facet
File picker
Filter box
Flat select
JSON editor
Multiline box
Numeric input
Radio button
Search bar
Select - single
Select - multi
Slider
Text area
Text input
Navigation
Breadcrumbs
Sidebar navigation
SubNavigation
Tabs
Feedback
Badge
Color bar
Color dot
Icon badge
Last updated
Loading spinner
Step progress bar
Sync feedback
Toast
Tooltip
Advanced
Action bar
Info token
Link svg
List box
Options cycle
Partial string match
Slide Y
You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.
Return to the latest documentation
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.
View source
1
import {SearchBar} from '@coveord/plasma-react';
2
import {useState} from 'react';
3
4
export default () => {
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
};

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.
  • filterText–The 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
  • event–The 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