docs/SearchInput.md
<SearchInput>In addition to the usual input types (<TextInput>, <SelectInput>, <ReferenceInput>, etc.), you can use the <SearchInput> in the filters array. This input is designed especially for the Filter Form. It's like a <TextInput resettable> with a magnifier glass icon - exactly the type of input users look for when they want to do a full-text search.
Tip: Prefer using <FilterLiveSearch> component if you want to provide your users with a search feature in a <List> aside.
import { SearchInput, TextInput, SelectInput } from 'react-admin';
const postFilters = [
<SearchInput source="q" alwaysOn />,
<TextInput label="Title" source="title" defaultValue="Hello, World!" />,
<SelectInput source="category" choices={choices} />,
];
export const PostList = () => (
<List filters={postFilters}>
...
</List>
);
In the example given above, the q filter triggers a full-text search on all fields. It's your responsibility to implement the full-text filtering capabilities in your dataProvider, or in your API.
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
placeholder | Optional | string | Search | Attribute for displaying default text in the input element |
resettable | Optional | boolean | true | If true, displays a clear button next to the input |
<SearchInput> also accepts the common input props.
Additional props are passed down to the underlying Material UI <TextField> component.
placeholderReplace the default Search placeholder by setting the placeholder prop:
<SearchInput source="q" placeholder="My search" alwaysOn />
resettableYou can disable the input reset feature by setting resettable to false:
<SearchInput source="q" resettable={false} alwaysOn />