No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Search

Overview

Search lets users quickly find relevant content. A search field allows a user to type a word or phrase to filter through a large amount of data without navigation.

Import

import { Search } from "@vibe/core";

Props

NameDescriptionDefaultControl
ariaExpanded
aria to be set if the popup is open.
Booleanish
-
ariaHasPopup
aria to be set the sarch result popup's type.
boolean"true""false""menu""listbox""tree""grid""dialog"
-
autoComplete
Configures the browser's autocomplete feature for the search input.
string
"off"
autoFocus
If true, the search input is automatically focused when the component mounts.
boolean
-
className
string
-
clearIconLabel
Label for the clear icon button, for accessibility purposes.
string
"Clear"
clearIconName
Name of the icon used for the clear button.
SubIcon
-
currentAriaResultId
ARIA property that identifies the currently active item within the search results.
string
-
data-testid
string
-
debounceRate
Rate at which search input changes are debounced.
number
400
disabled
If true, the search input is disabled and cannot be interacted with.
boolean
-
hideRenderActionOnInput
If true, hides the additional action when the user types in the search input.
boolean
-
id
string
-
inputAriaLabel
Aria-label for the search input, important for accessibility.
string
-
loading
Shows a loading indicator in the search component, typically used while fetching results.
boolean
-
onBlur
Callback function that is called when the search input loses focus.
(event: FocusEvent<Element, Element>) => void
--
onChange
Callback function that is called whenever the value of the search input changes.
(value: string) => void
--
onClear
Callback function that is called when the clear button is clicked.
() => void
--
onFocus
Callback function that is called when the search input gains focus.
(event: FocusEvent<Element, Element>) => void
--
onKeyDown
Callback function that is called when a keyboard key is down.
(event: KeyboardEvent<HTMLInputElement>) => void
--
placeholder
Placeholder text for the search input when it's empty.
string
-
renderAction
Render additional action within the right section of search component.
ReactElement<(((VibeComponent<IconButtonProps & RefAttributes<HTMLElement>, HTMLElement> & Partial<{ sizes: { ...; }; kinds: typeof ButtonType; colors: typeof ButtonColor; }>) | (FC<...> & Partial<...>)) & Required<...>) | (((VibeComponent<...> & Partial<...>) | (FC<...> & Partial<...>)) & Required<...>), string | J...
-
searchIconName
Name of the icon used for the search button.
SubIcon
-
searchResultsContainerId
The id of the container element where search results are to be displayed.
string
-
showClearIcon
Controls the visibility of the clear icon.
boolean
true
size
Size of the input element. Will influence also padding and font size.
"small""medium""large"
"medium"
value
The value of the search input.
string
-

Usage

➡️Search query input methods can be extended to include historical suggestions and auto-completion of queries.➡️Search results are displayed below the search bar.➡️Always use the search icon to help users identify search fields. Display the search icon as a presentational icon inside the search input.➡️Let users submit their search by hitting enter. For live-filtering search, update search results immediately without hitting enter and be mindful of performance.➡️Consider helping users understand what they can search for by offering placeholder examples or autosuggested results.➡️Once the user starts typing, clear button should appear and remain accessible, even after a search is performed.
🤓Not what you were looking for?
If you need to filter results from a long list, consider using the Combobox component.

Variants

Sizes

There are three sizes available: Small (32px), Medium (40px), and Large (48px).

<>
<Search placeholder="Small" size="small" />
<Search placeholder="Medium" size="medium" />
<Search placeholder="Large" size="large" />
</>

With additional action

The search field can contain one more search-related action (like filtering). This action should be represented by an icon button on the right.

<Search
placeholder="Search with icon"
renderAction={
<IconButton icon={FilterIcon} ariaLabel="Filter results" size="small" />
}
/>

Do's and Don'ts

Don't
Don't place the search icon on the right side of the input, or the clear button on the left side.
Don't
Don't remove the clear button after the user has performed the search.

Use cases and examples

Filter in combobox

<Combobox
placeholder="Placeholder text here"
options={options}
size="small"
optionLineHeight={28}
/>