Note
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.
Filter can leverage the max-width property. Learn more in our visual guidelines.
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' 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', }} 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' }]} {...props} > <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> <br /> <Filter double 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' }]} {...props} > <TextInput label="Example Text Field" placeholder="Enter Text" {...props} /> <Select blankSelection="Select One..." label="Example Collection Select" name="Collection Select" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> </> ) } export default FilterDefault
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 '../../' const FilterNoBackground = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A Galaxy Far Far Away Like Really Far Away' }, ] return ( <> <Filter background={false} filters={{ 'Full Name': 'John Wick', 'City': 'Las Vegas', }} 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' }]} {...props} > <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> <Filter background={false} double filters={{ 'Full Name': 'John Wick', 'City': 'Las Vegas', }} 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' }]} {...props} > <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> </> ) } export default FilterNoBackground
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterSingle = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A Galaxy Far Far Away Like Really Far Away' }, ] return ( <Filter filters={{ 'Full Name': 'John Wick', }} 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' }]} {...props} > <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> ) } export default FilterSingle
To display results, use templates single
or default
.
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterNoSort = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A Galaxy Far Far Away Like Really Far Away' }, ] return ( <Filter filters={{ 'Full Name': 'John Wick', }} results={546} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> ) } export default FilterNoSort
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterOnly = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A Galaxy Far Far Away Like Really Far Away' }, ] return ( <Filter filters={{ 'Full Name': 'John Wick' }} {...props} > <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </Filter> ) } export default FilterOnly
import React from 'react' import { Filter } from '../../' 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' }]} {...props} /> ) export default SortOnly
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterMinWidth = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A Galaxy Far Far Away Like Really Far Away' }, ] return ( <Filter {...props} double filters={{ 'Full Name': 'John Wick', 'City': 'San Francisco', }} minWidth="600px" 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' }]} > <TextInput label="Full Name" placeholder="Enter name" /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} /> <Flex spacing="between" > <Button text="Apply" /> <Button text="Clear" variant="secondary" /> </Flex> </Filter> ) } export default FilterMinWidth
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterClosePopover = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A Galaxy Far Far Away Like Really Far Away' }, ] return ( <Filter {...props} filters={{ 'Full Name': 'John Wick', 'City': 'San Francisco', }} 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" name="location" options={options} /> <Flex spacing="between" > <Button onClick={closePopover} text="Apply" /> <Button text="Clear" variant="secondary" /> </Flex> </form> )} </Filter> ) } export default FilterClosePopover