SearchInput

A search input type component.

Import#

import { SearchInput } from '@saas-ui/react'

Usage#

Basic#

<SearchInput placeholder="Search" />

Controlled#

function Search() {
  const [value, setValue] = React.useState('')


  return (
    <SearchInput
      placeholder="Search"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onReset={() => setValue('')}
    />
  )
}

Props#

icon

Description

The icon to render before the input text

Type
React.ReactElement

onReset

Description

Callback to trigger when the reset button is clicked or escape key is pressed

Type
(() => void)

placeholder

Description

The placeholder text for the input

Type
string
Default
Search

resetIcon

Description

The icon to render in the reset button

Type
React.ReactElement

rightElement

Description

Right element rendered when the value is empty

Type
React.ReactElement

Was this helpful?