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
export default () => <FilterBoxConnected id="filter-box-id-1" filterPlaceholder="Custom Placeholder" />;

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>
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
export default () => <FilterBoxConnected id="filter-box-id-2" maxWidth={160} />;
Disabled
1
import {FilterBoxConnected} from '@coveord/plasma-react';
2
3
export default () => <FilterBoxConnected id="filter-box-id-3" disabled />;

No guidelines exist for FilterBoxConnected yet.

Create guidelines