Intro

Basic Usage

Result

Non removable single select

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

Non removable single select

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

Removable single select

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

Number

DateRange

SingleSelect

MultiSelect

CollapsibleSingleSelect

CollapsibleMultiSelect

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

Number

DateRange

SingleSelect

MultiSelect

CollapsibleSingleSelect

CollapsibleMultiSelect

Number

DateRange

SingleSelect

MultiSelect

CollapsibleSingleSelect

CollapsibleMultiSelect

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