Form

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
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
  • 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
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