SearchInput

A search input type component.

Import#

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

Usage#

The SearchInput composes the Input component with a search icon and reset button.

Basic#

<SearchInput placeholder="Search" />

Default value#

<SearchInput placeholder="Search" defaultValue="AI prompt engineer" />

Custom icons#

You can pass custom icons to the icon and resetIcon props.

import { FiSearch, FiX } from 'react-icons/fi'


export default function Search() {
  return (
    <SearchInput placeholder="Search" icon={<FiSearch />} resetIcon={<FiX />} />
  )
}

Controlled#

You can control the value of the input by passing the value and onChange props. You can also pass an onReset prop to handle the reset button click.

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


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


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

Was this helpful?