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 { SearchIcon, CloseIcon } from '@chakra-ui/icons'
export default function Search() {
return (
<SearchInput
placeholder="Search"
icon={<SearchIcon />}
resetIcon={<CloseIcon />}
/>
)
}

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?