Skip to main content

Intro

Basic Usage​

Result
Loading...
Live Editor
<FilterBar
	addFilterOptions={[
		{ label: 'Client Age', disabled: false },
		{ label: 'Client Age Group', disabled: false },
	]}
>
	<SingleSelectFilter
		removable={false}
		filterName="Non removable single select"
		options={[
			{ label: 'Option1', value: 'o1' },
			{ label: 'Option2', value: 'o2' },
		]}
	/>
</FilterBar>

Non-Removable Filters​

These types of Filters are not removable from a FilterBar through UI. There are no onRemove callbacks associated with them. All Filters default to being non-removable.

Result
Loading...
Live Editor
<SingleSelectFilter
	filterName="Non removable single select"
	options={[
		{ label: 'Option1', value: 'o1' },
		{ label: 'Option2', value: 'o2' },
	]}
/>

Removable Filters​

These types of filters are removable from a FilterBar through UI.

Result
Loading...
Live Editor
<SingleSelectFilter
	removable
	filterName="Removable single select"
	options={[
		{ label: 'Option1', value: 'o1' },
		{ label: 'Option2', value: 'o2' },
	]}
/>

Prefix and Suffix​

All filters support the renderPrefix and renderSuffix props to allow for custom content to be rendered before and after the filter name.

Result
Loading...
Live Editor
<div className="d-flex flex-wrap">
	<NumberFilter
		renderPrefix={() => <span className="icon-placeholder"></span>}
		renderSuffix={() => <span className="icon-placeholder"></span>}
		filterName="Number"
		className="me-3 mb-2"
	/>
	<DateRangeFilter
		renderPrefix={() => <span className="icon-placeholder"></span>}
		renderSuffix={() => <span className="icon-placeholder"></span>}
		filterName="DateRange"
		className="me-3 mb-2"
		minYear={2000}
		maxYear={2010}
	/>
	<SingleSelectFilter
		renderPrefix={() => <span className="icon-placeholder"></span>}
		renderSuffix={() => <span className="icon-placeholder"></span>}
		filterName="SingleSelect"
		className="me-3 mb-2"
		options={[
			{ label: 'Option1', value: 'o1' },
			{ label: 'Option2', value: 'o2' },
		]}
	/>
	<MultiSelectFilter
		renderPrefix={() => <span className="icon-placeholder"></span>}
		renderSuffix={() => <span className="icon-placeholder"></span>}
		filterName="MultiSelect"
		className="me-3 mb-2"
		options={[
			{ label: 'Option1', value: 'o1' },
			{ label: 'Option2', value: 'o2' },
		]}
	/>
	<CollapsibleSingleSelectFilter
		renderPrefix={() => <span className="icon-placeholder"></span>}
		renderSuffix={() => <span className="icon-placeholder"></span>}
		filterName="CollapsibleSingleSelect"
		className="me-3 mb-2"
		options={[
			{ label: 'Option1', id: 'o1' },
			{ label: 'Option2', id: 'o2' },
		]}
	/>
	<CollapsibleMultiSelectFilter
		renderPrefix={() => <span className="icon-placeholder"></span>}
		renderSuffix={() => <span className="icon-placeholder"></span>}
		filterName="CollapsibleMultiSelect"
		className="me-3 mb-2"
		options={[
			{ label: 'Option1', id: 'o1' },
			{ label: 'Option2', id: 'o2' },
		]}
	/>
</div>

Size​

All filters support the size prop to allow for custom sizing of the trigger.

Result
Loading...
Live Editor
<>
	<div className="d-flex flex-wrap">
		<NumberFilter filterName="Number" size="sm" className="me-3 mb-2" />
		<DateRangeFilter
			filterName="DateRange"
			size="sm"
			className="me-3 mb-2"
			minYear={2000}
			maxYear={2010}
		/>
		<SingleSelectFilter
			filterName="SingleSelect"
			size="sm"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', value: 'o1' },
				{ label: 'Option2', value: 'o2' },
			]}
		/>
		<MultiSelectFilter
			filterName="MultiSelect"
			size="sm"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', value: 'o1' },
				{ label: 'Option2', value: 'o2' },
			]}
		/>
		<CollapsibleSingleSelectFilter
			filterName="CollapsibleSingleSelect"
			size="sm"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', id: 'o1' },
				{ label: 'Option2', id: 'o2' },
			]}
		/>
		<CollapsibleMultiSelectFilter
			filterName="CollapsibleMultiSelect"
			size="sm"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', id: 'o1' },
				{ label: 'Option2', id: 'o2' },
			]}
		/>
	</div>
	<div className="d-flex flex-wrap">
		<NumberFilter filterName="Number" size="lg" className="me-3 mb-2" />
		<DateRangeFilter
			filterName="DateRange"
			size="lg"
			className="me-3 mb-2"
			minYear={2000}
			maxYear={2010}
		/>
		<SingleSelectFilter
			filterName="SingleSelect"
			size="lg"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', value: 'o1' },
				{ label: 'Option2', value: 'o2' },
			]}
		/>
		<MultiSelectFilter
			filterName="MultiSelect"
			size="lg"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', value: 'o1' },
				{ label: 'Option2', value: 'o2' },
			]}
		/>
		<CollapsibleSingleSelectFilter
			filterName="CollapsibleSingleSelect"
			size="lg"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', id: 'o1' },
				{ label: 'Option2', id: 'o2' },
			]}
		/>
		<CollapsibleMultiSelectFilter
			filterName="CollapsibleMultiSelect"
			size="lg"
			className="me-3 mb-2"
			options={[
				{ label: 'Option1', id: 'o1' },
				{ label: 'Option2', id: 'o2' },
			]}
		/>
	</div>
</>