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