React SDK

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

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

      Loading...

      Rating

      Editable Example
      Suggestions
        Powered by

        Loading...

        Color

        Editable Example
        Suggestions
          Powered by

          Loading...

          Tabs

          Editable Example
          Suggestions
            Powered by

            Loading...

            Range

            Editable Example
            Suggestions
              Powered by

              Loading...

              Select

              Editable Example
              Suggestions
                Powered by

                Loading...

                Base Props

                NameTypeDefaultDescription
                namestring-The name of a given Filter.
                titlestring-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.

                NameTypeDefaultDescription
                limitnumber10Maximum number of items to initially show. Maximum is 100.
                searchablebooleantrue 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.
                sortAscendingbooleantrue if sort is not 'count'.Whether to sort in ascending order.
                pinSelectedbooleantrue 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'defaultHow to format the values.
                placeholderstring'Search'Placeholder for search input.
                hideCountbooleanfalseHide total items count.
                textTransform'normal-case' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first-letter'normal-caseControl the capitalization of text options.
                includesstring[]If the list is set, select the items of the list from the filter options.
                excludesstring[]If the list is set, eliminate the items of the list from the filter options.
                prefixFilterstringOnly include the filter options that starts with the prefix.

                Color Props

                Exclusive props if type is color.

                NameTypeDefaultDescription
                namestring-The name of a given Filter.
                titlestring-Title of the filter list.

                Rating Props

                Exclusive props if type is rating.

                NameTypeDefaultDescription
                namestring-The name of a given Filter.
                titlestring-Title of the filter list.
                hideCountbooleanfalseHide total items count.

                Tabs Props

                Exclusive props if type is tabs.

                NameTypeDefaultDescription
                format'default' | 'price'defaultHow to format the values.
                limitnumber15Maximum 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.
                sortAscendingbooleantrue if sort is not 'count'Whether to sort in ascending order.
                hideCountbooleanfalseHide total items count.
                textTransform'normal-case' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first-letter'normal-caseControl the capitalization of text options.
                includesstring[]If the list is set, select the items of the list from the filter options.
                excludesstring[]If the list is set, eliminate the items of the list from the filter options.
                prefixFilterstringOnly include the filter options that starts with the prefix.

                Range Props

                Exclusive props if type is range.

                NameTypeDefaultDescription
                format'default' | 'price'defaultHow to format the values.
                showInputsbooleanfalseShow inputs.
                stepsnumber[]An array of custom steps to use. This will override step.
                ticknumberThe interval to show small ticks.
                ticksnumber[]An array of custom ticks to use. This will override tick.

                Select Props

                Exclusive props if type is select.

                NameTypeDefaultDescription
                format'default' | 'price'defaultHow 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.
                sortAscendingbooleantrue if sort is not 'count'Whether to sort in ascending order.
                hideCountbooleanfalseHide total items count.
                textTransform'normal-case' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first-letter'normal-caseControl the capitalization of text options.
                includesstring[]If the list is set, select the items of the list from the filter options.
                excludesstring[]If the list is set, eliminate the items of the list from the filter options.
                prefixFilterstringOnly include the filter options that starts with the prefix.