Search

In progress

ARIA

RTL

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
className	string	No		Tailwind classes for customization
isOpen	boolean	Yes	_	Open state
onChangeOpen	(isOpen: boolean) => void	Yes	_	Function for setting open state
onChangeSearch	(search: string) => void	Yes	-	Function for setting search value
onChangeSelected	(value: number) => void	No	_	Function for setting selected item index
search	string	Yes	_	Search query data

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
autoFocus	boolean	No	false	Specifies that an search should automatically get focus when the page loads
className	string	No		Tailwind classes for customization
placeholder	string	No	"Search"	Search field placeholder

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