You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Filter Box

A filter box allows users to enter text to filter data. It is frequently used with tables and dropdown menus.

View source

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

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 id–the unique identifier of the filter box filterText–the value of the filter box
`onKeyDown`	`(evt: KeyboardEvent<HTMLInputElement>) => void`		Callback function that runs onKeyDown evt–the keyboard event
`onKeyUp`	`(evt: KeyboardEvent<HTMLInputElement>) => void`		Callback function that runs onKeyUp evt–the keyboard event
`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

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