SearchInput
A search input type component.
Source
@saas-ui/forms
- 2.11.2 (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?