Form

Filter Box

A filter box allows users to enter text to filter data. It is frequently used with tables and dropdown menus.
1
import {FilterBoxConnected} from '@coveord/plasma-react';
2
3
const Demo = () => <FilterBoxConnected id="filter-box-id-1" filterPlaceholder="Custom Placeholder" />;
4
export default Demo;

Props

NameTypeDefaultDescription
childrenReactNode
classNamestring
CSS class to add on the element
containerClassesstring[]
list of CSS classes to add on the container
disabledbooleanfalse
Whether to disable the filter box
filterPlaceholderstring
Placeholder of the input element
idstring
The unique identifier of that filter box
isAutoFocusbooleanfalse
Whether to automatically focus on the filter box
keyKey
maxWidthnumber
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
  • idthe unique identifier of the filter box
  • filterTextthe value of the filter box
onKeyDown(evt: KeyboardEvent<HTMLInputElement>) => void
Callback function that runs onKeyDown
  • evtthe keyboard event
onKeyUp(evt: KeyboardEvent<HTMLInputElement>) => void
Callback function that runs onKeyUp
  • evtthe keyboard event
refLegacyRef<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).
truncateboolean
Whether to truncate the input or not
withTitleOnInputboolean
Whether to display a title on the input

Examples

Maximum width
1
import {FilterBoxConnected} from '@coveord/plasma-react';
2
3
const Demo = () => <FilterBoxConnected id="filter-box-id-2" maxWidth={160} />;
4
export default Demo;
Disabled
1
import {FilterBoxConnected} from '@coveord/plasma-react';
2
3
const Demo = () => <FilterBoxConnected id="filter-box-id-3" disabled />;
4
export default Demo;

No guidelines exist for FilterBoxConnected yet.

Create guidelines