Filter Box
A filter box allows users to enter text to filter data. It is frequently used with tables and dropdown menus.
Props
Name | Type | Default | Description |
---|---|---|---|
children | ReactNode | ||
className | string | CSS class to add on the element | |
containerClasses | string[] | list of CSS classes to add on the container | |
disabled | boolean | false | Whether to disable the filter box |
filterPlaceholder | string | Placeholder of the input element | |
id | string | The unique identifier of that filter box | |
isAutoFocus | boolean | false | Whether to automatically focus on the filter box |
key | Key | ||
maxWidth | number | The maximum width in px of the filter box | |
onBlur | () => void | Callback function that run when the filter box lose the focus | |
onFilterCallback | (id: string, filterText: string) => void | Callback funtion that runs when the filter changes
| |
onKeyDown | (evt: KeyboardEvent<HTMLInputElement>) => void | Callback function that runs onKeyDown
| |
onKeyUp | (evt: KeyboardEvent<HTMLInputElement>) => void | Callback function that runs onKeyUp
| |
ref | LegacyRef<FilterBox> | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | |
truncate | boolean | Whether to truncate the input or not | |
withTitleOnInput | boolean | Whether to display a title on the input |
Examples
Maximum width
Disabled
No guidelines exist for FilterBoxConnected yet.