Filter

This kit can be implemented in a variety of ways.
To see examples of how to implement this kit in production visit the /dev_docs/search page in production.

Note
All React examples are wrapped in a {closePopover} method to ensure the popover closes on click of "Apply".

The min_width prop for the popover inside of filter is used in all the examples and is set to 360px. That is the min_width prop we recommend using as it is the same pixel value as our max_width sm global prop.

Summary

Uses Icons

See this kit in action in our sample UI

Default

To display the "No Filters Selected" text, the filters prop must be null. As a suggestion, check the values of each key in your filters object. If they are all falsy, return null.

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const SortingChangeCallback = (sortOptions) => {
  alert(JSON.stringify(sortOptions[0]))
}

const FilterDefault = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far away...' },
  ]
  return (

    <>
      <Filter
          double
          filters={{
            'Full Name': 'John Wick',
            'City': 'San Francisco',
          }}
          marginBottom="xl"
          minWidth="375px"
          onSortChange={SortingChangeCallback}
          results={1}
          sortOptions={{
            popularity: 'Popularity',
            // eslint-disable-next-line
            manager_title: 'Manager\'s Title',
            // eslint-disable-next-line
            manager_name: 'Manager\'s Name',
          }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Full Name"
              placeholder="Enter name"
          />

          <Select
              blankSelection="Select One..."
              label="Territory"
              maxWidth="sm"
              name="location"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}

      </Filter>


      <Filter
          double
          minWidth="375px"
          onSortChange={SortingChangeCallback}
          results={0}
          sortOptions={{
            popularity: 'Popularity',
            // eslint-disable-next-line
            manager_title: 'Manager\'s Title',
            // eslint-disable-next-line
            manager_name: 'Manager\'s Name',
          }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Example Text Field"
              placeholder="Enter Text"
          />

          <Select
              blankSelection="Select One..."
              label="Example Collection Select"
              name="Collection Select"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
      </Filter>
    </>
  )
}

export default FilterDefault

No Background

To remove the background from a filter, add the prop background with a value of false.

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterNoBackground = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <>
      <Filter
          background={false}
          filters={{
          'Full Name': 'John Wick',
          'City': 'Las Vegas',
        }}
          marginBottom="xl"
          minWidth="360px"
          results={3}
          sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Full Name"
              placeholder="Enter name"
          />

          <Select
              blankSelection="Select One..."
              label="Territory"
              name="location"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}

      </Filter>

      <Filter
          background={false}
          double
          filters={{
          'Full Name': 'John Wick',
          'City': 'Las Vegas',
        }}
          minWidth="360px"
          results={3}
          sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Full Name"
              placeholder="Enter name"
          />

          <Select
              blankSelection="Select One..."
              label="Territory"
              name="location"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
      </Filter>
    </>
  )
}

export default FilterNoBackground

Single

import React from 'react'

import Filter from 'playbook-ui'

import Button from 'playbook-ui'
import Flex from 'playbook-ui'
import Select from 'playbook-ui'
import TextInput from 'playbook-ui'

const FilterSingle = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <Filter
        filters={{
          'Full Name': 'John Wick',
        }}
        minWidth="360px"
        results={546}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>
        <TextInput
            label="Full Name"
            placeholder="Enter name"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    </Filter>
  )
}

export default FilterSingle

No Sort

To display results, use templates single or default.

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterNoSort = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <Filter
        filters={{
          'Full Name': 'John Wick',
        }}
        minWidth="360px"
        results={546}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>
        <TextInput
            label="Full Name"
            placeholder="Enter name"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    
    </Filter>
  )
}

export default FilterNoSort

Filter Only

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterOnly = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (
    <Filter
        filters={{ 'Full Name': 'John Wick' }}
        minWidth="360px"
    >
    {({ closePopover }) => (
      <form>

        <TextInput
            label="Full Name"
            placeholder="Enter name"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}

    </Filter>
  )
}

export default FilterOnly

Sort Only

import React from 'react'

import Filter from 'playbook-ui'

const SortOnly = (props) => (
  <Filter
      sortOptions={{
        popularity: 'Popularity',
        // eslint-disable-next-line
        manager_title: 'Manager\'s Title',
        // eslint-disable-next-line
        manager_name: 'Manager\'s Name',
      }}
      sortValue={[{ name: 'popularity', dir: 'desc' }]}
  />
)

export default SortOnly

Max Width for Popover Inside of Filter

Filter can leverage the max-width property. Learn more in our visual guidelines.

import React from 'react'
import { Button, Filter, Flex, Select } from 'playbook-ui'

const FilterMaxWidth = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
  ]
  return (
    <Filter
        double
        filters={{
          'Full Name': 'John Wick',
          'City': 'San Francisco',
        }}
        minWidth="360px"
        results={1}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>

      <Select
          blankSelection="Select One..."
          label="Territory"
          maxWidth="sm"
          name="location"
          options={options}
      />
        <Button
            text="Apply"
        />

        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    </Filter>
  )
}

export default FilterMaxWidth

Max Height for Popover Inside of Filter

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterMaxHeight = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
  ]
  return (
    <Filter
        double
        filters={{
          'Full Name': 'John Wick',
          'City': 'San Francisco',
        }}
        maxHeight="360px"
        minWidth="360px"
        results={1}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
    {({ closePopover }) => (
      <form>
        <Select
            blankSelection="Select One..."
            label="Territory"
            name="location"
            options={options}
        />
        <TextInput
            label="First Name"
            placeholder="Enter name"
        />
        <TextInput
            label="Middle Name"
            placeholder="Enter name"
        />
        <TextInput
            label="Last Name"
            placeholder="Enter name"
        />
        <TextInput
            label="Email"
            placeholder="Enter email"
        />
        <TextInput
            label="Address"
            placeholder="Enter address"
        />
        <Flex
            spacing="between"
        >
          <Button
              onClick={closePopover}
              text="Apply"
          />
          <Button
              text="Clear"
              variant="secondary"
          />
        </Flex>
      </form>
    )}
    </Filter>
  )
}

export default FilterMaxHeight

Filter Placement

Click the filter button above to toggle the popover.

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const SortingChangeCallback = (sortOptions) => {
  alert(JSON.stringify(sortOptions[0]))
}

const FilterPlacement = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away...' },
  ]
  return (

    <>
      <Filter
          double
          minWidth="360px"
          onSortChange={SortingChangeCallback}
          placement={"right"}
          results={1}
          sortOptions={{
            popularity: 'Popularity',
            // eslint-disable-next-line
            manager_title: 'Manager\'s Title',
            // eslint-disable-next-line
            manager_name: 'Manager\'s Name',
          }}
          sortValue={[{ name: 'popularity', dir: 'desc' }]}
      >
      {({ closePopover }) => (
        <form>

          <TextInput
              label="Example Text Field"
              placeholder="Enter Text"
          />

          <Select
              blankSelection="Select One..."
              label="Example Collection Select"
              name="Collection Select"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
      </Filter>
    </>
  )
}

export default FilterPlacement

Popover Props

This kit uses the Popover kit under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional popoverProps prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see here.

import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'

const FilterPopoverProps = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
  ]

  const popoverProps = {
    width: "250px"
  }

  return (
    <Filter
        double
        filters={{
          'Full Name': 'John Wick',
          'City': 'San Francisco',
        }}
        popoverProps={popoverProps}
        results={1}
        sortOptions={{
          popularity: 'Popularity',
          // eslint-disable-next-line
          manager_title: 'Manager\'s Title',
          // eslint-disable-next-line
          manager_name: 'Manager\'s Name',
        }}
        sortValue={[{ name: 'popularity', dir: 'desc' }]}
    >
      {({ closePopover }) => (
        <form>
          <TextInput
              label="Example Text Field"
              placeholder="Enter Text"
          />
          <Select
              blankSelection="Select One..."
              label="Example Collection Select"
              name="Collection Select"
              options={options}
          />
          <Flex
              spacing="between"
          >
            <Button
                onClick={closePopover}
                text="Apply"
            />
            <Button
                text="Clear"
                variant="secondary"
            />
          </Flex>
        </form>
      )}
    </Filter>
  )
}

export default FilterPopoverProps

UI Samples using Filter Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat