SearchInput
A search input type component.
Source
@saas-ui/forms
- 2.10.0 (latest)
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 (<SearchInputplaceholder="Search"value={value}onChange={(e) => setValue(e.target.value)}onReset={() => setValue('')}/>)}
Was this helpful?