`<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.

Usage

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.

Props

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.

`placeholder`

Replace the default Search placeholder by setting the placeholder prop:

<SearchInput source="q" placeholder="My search" alwaysOn />

`resettable`

You can disable the input reset feature by setting resettable to false:

<SearchInput source="q" resettable={false} alwaysOn />