Search

In progress

Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.

Anatomy

<Search>
  <Search.Input>
    <Search.Input.Icon />
    <Search.Input.Input />
    <Search.Input.ButtonClear />
  </Search.Input>

  <Search.Transition>
    <Search.Result>
      <Search.ResultHeading />

      <Search.ResultItem>
        ...
      </Search.ResultItem>
    <Search.Result>
  </Search.Transition>
</Search>

Default

No Transition

Search props

Name	Type	Required	Default	Description
onChangeSearch	(value: string) => void	Yes	-	Function for setting search value
onChangeOpen	(value: boolean) => void	Yes	_	Function for setting open state
search	string	Yes	_	Search query data
isOpen	boolean	Yes	_	Open state
onChangeSelected	(value: number) => void	No	_	Function for setting selected item index
onChangeOpen	(isOpen: boolean) => void	No	-	The function to call when Search is open or closed
className	string	No		Tailwind classes for customization

Search.Input

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization

Search.Input.Icon

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization

Search.Input.Input

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization
placeholder	string	No	"Search"	Search field placeholder
autoFocus	boolean	No	false	Specifies that an search should automatically get focus when the page loads

Search.Input.ButtonClear

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization

Search.Transition

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization

Search.NoResults

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization
label	string \| React.ReactNode	Yes	Search for	Label for no results

Search.Result

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization

Search.ResultItem

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization

Search.ResultHeading

Name	Type	Required	Default	Description
className	string	No		Tailwind classes for customization