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>

<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' }, ]} />

<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' }, ]} />

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

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

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