Playbook Design System

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, Button, Flex, Select, 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

Sidebar

import React, { useState } from 'react'

import { Filter, Select, TextInput, useCollapsible, SectionSeparator, Checkbox, Flex, Table, Caption, Icon } from 'playbook-ui'

const people = [
  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
]

const FilterSidebar = (props) => {
  const [name, setName] = useState('')
  const [ territory, setTerritory ] = useState('')
  const [ products, setProducts ] = useState({})
  const handleUpdateName = ({ target }) => {
    setName(target.value)
  }
  const handleUpdateTerritory = ({ target }) => {
    setTerritory(target.value)
  }
  const handleCheckboxChange = ({ target }) => {
    setProducts(prev => ({
      ...prev,
      [target.name]: !prev[target.name],
    }))
  }
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far away...' },
  ]

  const filteredPeople = people.filter((person) => {
    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())

    const matchesTerritory = territory === '' ? true : person.territory === territory

    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])

    return matchesName && matchesTerritory && matchesProducts
  })

  return (
    <>
      <Flex>
        <Filter
            isCollapsed={isCollapsed}
            marginRight="xs"
            onCollapse={() => setIsCollapsed(!isCollapsed)}
            results={filteredPeople.length}
            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' }]}
            variant="sidebar"
            width="xs"
        >
          <Filter.Section
              collapsed={isCollapsed}
              headerText="Full Name"
          >
            <TextInput
                onChange={handleUpdateName}
                placeholder="Enter name"
                value={name}
            />
          </Filter.Section>
          <SectionSeparator />
          <Filter.Section
              collapsed={isCollapsed}
              collapsible
              headerText="Territory"
          >
            <Select
                blankSelection="Select One..."
                name="location"
                onChange={handleUpdateTerritory}
                options={options}
            />
          </Filter.Section>
          <SectionSeparator />
          <Filter.Section
              collapsed={isCollapsed}
              collapsible
              headerText="Products"
          >
            <div>
              <Checkbox
                  marginBottom="sm"
                  name="Doors"
                  onChange={handleCheckboxChange}
                  text="Doors"
              />
            </div>
            <div>
              <Checkbox
                  marginBottom="sm"
                  name="Windows"
                  onChange={handleCheckboxChange}
                  text="Windows"
              />
            </div>
            <div>
              <Checkbox
                  marginBottom="sm"
                  name="Siding"
                  onChange={handleCheckboxChange}
                  text="Siding"
              />
            </div>
            {!isProductsCollapsed &&
              <>
                <div>
                  <Checkbox
                      checked={products["Roofing"]}
                      marginBottom="sm"
                      name="Roofing"
                      onChange={handleCheckboxChange}
                      text="Roofing"
                  />
                </div>
                <div>
                  <Checkbox
                      checked={products["Gutters"]}
                      marginBottom="sm"
                      name="Gutters"
                      onChange={handleCheckboxChange}
                      text="Gutters"
                  />
                </div>
                <div>
                  <Checkbox
                      checked={products["Solar"]}
                      marginBottom="sm"
                      name="Solar"
                      onChange={handleCheckboxChange}
                      text="Solar"
                  />
                </div>
                <div>
                  <Checkbox
                      checked={products["Insulation"]}
                      marginBottom="sm"
                      name="Insulation"
                      onChange={handleCheckboxChange}
                      text="Insulation"
                  />
                </div>
              </>
            }
            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
              <Flex
                  cursor="pointer"
                  marginBottom="sm"
              >
                <Caption
                    color="link"
                    marginRight="xxs"
                    size="xs"
                    text={isProductsCollapsed ? "Show More" : "Show Less"}
                />
                <Icon
                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
                />
              </Flex>
            </div>
          </Filter.Section>
        </Filter>
        <Table
            size="sm"
        >
          <thead>
            <tr>
              <th>{'Name'}</th>
              <th>{'Territory'}</th>
              <th>{'Products'}</th>
            </tr>
          </thead>
          <tbody>
            {filteredPeople.map((person) => (<tr key={person.name}>
              <td>{ person.name }</td>
              <td>{ person.territory }</td>
              <td>{ person.products.join(", ") }</td>
            </tr>))}
          </tbody>
        </Table>
      </Flex>
    </>
  )
}

export default FilterSidebar

Filter

Available Props

Contribute to Playbook

Power

Connect