Filter
The Filter
component is used to render filter options allowing refining of search results.
Usage
Additional imports used in the examples:
List
Editable Example
​
Suggestions
Price
Loading...
List: Searching and Sorting
Add the searchable
prop to allow searching within the filter values. This is just a basic filter to match the term to the filter item.
The sorting method used to sort the filter items can also be changed to alphabetical by setting the sort
prop to alpha
.
Editable Example
​
Suggestions
Loading...
Rating
Editable Example
​
Suggestions
Loading...
Color
Editable Example
​
Suggestions
Loading...
Tabs
Editable Example
​
Suggestions
Loading...
Range
Editable Example
​
Suggestions
Loading...
Select
Editable Example
​
Suggestions
Loading...
Base Props
Name | Type | Default | Description |
---|---|---|---|
name | string | - | The name of a given Filter. |
title | string | - | Title of the filter list. |
type | 'list' | 'color' | 'rating' | 'tabs' | 'range' | 'select' | 'list' | Type of the filter. |
List Props
Exclusive props if type
is list
.
Name | Type | Default | Description |
---|---|---|---|
limit | number | 10 | Maximum number of items to initially show. Maximum is 100. |
searchable | boolean | true if the number of options exceeds limit . | If true, display an input for searching through items. |
sort | 'count' | 'alpha' | 'none' | 'count' | How to sort the items. 'alpha' stands for 'alphanumeric' meaning to sort the items based on label alphabetically, 'count' to sort based on count, 'none' to skip the sorting process. |
sortAscending | boolean | true if sort is not 'count' . | Whether to sort in ascending order. |
pinSelected | boolean | true if the number of options exceeds limit . | Pin selected items to the top of the list. |
renderItem | (value:string) => React.ReactNode | - | A render prop function is used to custom the item label rather than just displaying text. |
format | 'default' | 'price' | default | How to format the values. |
placeholder | string | 'Search' | Placeholder for search input. |
hideCount | boolean | false | Hide total items count. |
textTransform | 'normal-case' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first-letter' | normal-case | Control the capitalization of text options. |
includes | string[] | If the list is set, select the items of the list from the filter options. | |
excludes | string[] | If the list is set, eliminate the items of the list from the filter options. | |
prefixFilter | string | Only include the filter options that starts with the prefix. |
Color Props
Exclusive props if type
is color
.
Name | Type | Default | Description |
---|---|---|---|
name | string | - | The name of a given Filter. |
title | string | - | Title of the filter list. |
Rating Props
Exclusive props if type
is rating
.
Name | Type | Default | Description |
---|---|---|---|
name | string | - | The name of a given Filter. |
title | string | - | Title of the filter list. |
hideCount | boolean | false | Hide total items count. |
ratingMax | number | Max value, overrides context's value. |
Tabs Props
Exclusive props if type
is tabs
.
Name | Type | Default | Description |
---|---|---|---|
format | 'default' | 'price' | default | How to format the values. |
limit | number | 15 | Maximum number of tabs. |
sort | 'count' | 'alpha' | 'none' | 'count' | How to sort the tabs. 'alpha' stands for 'alphanumeric' meaning to sort the items based on label alphabetically, 'count' to sort based on count, 'none' to skip the sorting process. |
sortAscending | boolean | true if sort is not 'count' | Whether to sort in ascending order. |
hideCount | boolean | false | Hide total items count. |
textTransform | 'normal-case' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first-letter' | normal-case | Control the capitalization of text options. |
includes | string[] | If the list is set, select the items of the list from the filter options. | |
excludes | string[] | If the list is set, eliminate the items of the list from the filter options. | |
prefixFilter | string | Only include the filter options that starts with the prefix. |
Range Props
Exclusive props if type
is range
.
Name | Type | Default | Description |
---|---|---|---|
format | 'default' | 'price' | default | How to format the values. |
showInputs | boolean | false | Show inputs. |
steps | number[] | An array of custom steps to use. This will override step . | |
tick | number | The interval to show small ticks. | |
ticks | number[] | An array of custom ticks to use. This will override tick . |
Select Props
Exclusive props if type
is select
.
Name | Type | Default | Description |
---|---|---|---|
format | 'default' | 'price' | default | How to format the values. |
sort | 'count' | 'alpha' | 'none' | 'count' | How to sort the options. 'alpha' stands for 'alphanumeric' meaning to sort the items based on label alphabetically, 'count' to sort based on count, 'none' to skip the sorting process. |
sortAscending | boolean | true if sort is not 'count' | Whether to sort in ascending order. |
hideCount | boolean | false | Hide total items count. |
textTransform | 'normal-case' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first-letter' | normal-case | Control the capitalization of text options. |
includes | string[] | If the list is set, select the items of the list from the filter options. | |
excludes | string[] | If the list is set, eliminate the items of the list from the filter options. | |
prefixFilter | string | Only include the filter options that starts with the prefix. |