Filter component allows to create controls for data fitlering based on one or several criteria.

contentAfter

contentBefore

Label for "More" filter selection action button

moreLabel

onChange

options

values

() => {
  const [search, setSearch] = useState('');
  const [values, setValues] = useState({
    period: ['All time'],
    statuss: [] as string[],
    actions: [] as string[]
  });

  const onCustomPeriod = () => {
    setValues({
      ...values,
      period: ['custom']
    });
  };

  const options = useMemo(() => {
    return {
      period: {
        label: 'Period',
        searchable: true,
        valueLabel: values.period.indexOf('custom') > -1 ? '13 Jan - 15 feb' : undefined,
        closeMenuOnItemSelect: true,
        options: [
          { label: 'All time', value: 'All time', itemType: 'item', default: true },
          { label: 'Last week', value: 'Last week', itemType: 'item' },
          { label: 'Custom period', value: 'custom', itemType: 'item', icon: IconCalendar, onClick: onCustomPeriod }
        ]
      } as FilterGroup,
      statuss: {
        label: 'Process Statuss',
        searchable: true,
        options: [
          { label: 'New', value: 'new', itemType: 'checkbox' },
          { label: 'Pending', value: 'pending', itemType: 'checkbox' },
          { label: 'In progress', value: 'in_progress', itemType: 'checkbox' },
          { label: 'Failed', value: 'failed', itemType: 'checkbox' },
          { label: 'Done', value: 'done', itemType: 'checkbox' }
        ]
      } as FilterGroup,
      actions: {
        label: 'Actions',
        searchable: true,
        options: [
          { label: 'Lorem ipsum', value: 'Lorem ipsum', itemType: 'checkbox' },
          { label: 'Sed ut', value: 'Sed ut', itemType: 'checkbox' },
          { label: 'At vero', value: 'At vero', itemType: 'checkbox' },
          { label: 'Natus error', value: 'Natus error', itemType: 'checkbox' },
          { label: 'Doloremque laudantium', value: 'Doloremque laudantium', itemType: 'checkbox' },
          { label: 'Totam rem', value: 'Totam rem', itemType: 'checkbox' },
          { label: 'Eaque ipsa', value: 'Eaque ipsa', itemType: 'checkbox' },
          { label: 'Quae ab', value: 'Quae ab', itemType: 'checkbox' },
          { label: 'Inventore veritatis', value: 'Inventore veritatis', itemType: 'checkbox' },
          { label: 'Architecto beatae', value: 'Architecto beatae', itemType: 'checkbox' },
          { label: 'Dicta sunt', value: 'Dicta sunt', itemType: 'checkbox' },
          { label: 'Explicabo', value: 'Explicabo', itemType: 'checkbox' },
          { label: 'Nemo enim', value: 'Nemo enim', itemType: 'checkbox' },
          { label: 'Ipsum quia', value: 'Ipsum quia', itemType: 'checkbox' },
          { label: 'Voluptas sit', value: 'Voluptas sit', itemType: 'checkbox' },
          { label: 'Consectetur adipiscing', value: 'Consectetur adipiscing', itemType: 'checkbox' },
          { label: 'Tempor incididunt', value: 'Tempor incididunt', itemType: 'checkbox' },
          { label: 'Duis aute', value: 'Duis aute', itemType: 'checkbox' },
          { label: 'Exercitation ullamco', value: 'Exercitation ullamco', itemType: 'checkbox' },
          { label: 'Labore et', value: 'Labore et', itemType: 'checkbox' }
        ]
      } as FilterGroup
    };
  }, [values.period]);

  const searchInput = useMemo(() => {
    return (
      <ToggleInputButton
        round
        aria-label="Search"
        iconLeft={IconSearch}
        value={search}
        placeholder="Search"
        buttonVariant="ghost-subtle"
        onChange={(e) => setSearch(e.target.value)}
        onClear={() => setSearch('')}
        isButtonRound
      />
    );
  }, [search]);

  return (
    <Box width="100%">
      <Filter
        contentBefore={searchInput}
        contentAfter={<ResponsiveMenuMock />}
        options={options}
        values={values}
        onChange={setValues}
        moreLabel="Filter"
      />
    </Box>
  );
}

Name	Description	Default
contentAfter	Content displayed after filter items	-
contentBefore	Content displayed before filter items	-
moreLabel	Label for "More" filter selection action button	Filter
onChange required	Filter change callback	-
options required	Available filter option sets	-
values required	Current active filter value sets	-