Search Bar

Render a search bar with controlled search input, clear button and optional left section

• Import

  import { SearchBar } from '@smile/haring-react';
• Extends TextInput
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
clearButtonAriaLabel	string	"Clear"	Aria label of clear button
inputAriaLabel	string	"Search"	Aria label of input
inputPlaceholder	string	-	Placeholder of input
leftSection	ReactNode	-	left section content
onChange	(value: string) => void	-	Called when input changes
onSearchClear	() => void	-	Called when clear button is clicked
onSearchSubmit	(event: FormEvent) => void	-	Called when input is submitted
opened	boolean	-	Controlled value that represents whether or not the SearchBar is considered active/visible and activates focus (does not actually affect visibility)
value	string	-	Controlled value of input
...	-	-	Extends TextInput