Skip to content

FilterTrigger

The component is used as an active state of a trigger in filters.

Usage with Select

Use FilterTrigger as a tag for Select.Trigger.

tsx
import React from 'react';
import { FilterTrigger } from '@semcore/base-trigger';
import Select from '@semcore/select';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';

const Demo = () => (
  <Flex direction='column' gap={2} alignItems='start'>
    <Text tag='label' id='color-filter-label' htmlFor='color-filter-trigger' size={200}>
      Color
    </Text>
    <Select>
      <Select.Trigger tag={FilterTrigger} id='color-filter-trigger' />
      <Select.Menu aria-labelledby='color-filter-label'>
        {colors.map((option, idx) => (
          <Select.Option key={idx} value={option}>
            {option}
          </Select.Option>
        ))}
      </Select.Menu>
    </Select>
  </Flex>
);

const colors = ['Blue', 'Gray', 'Green', 'Orange', 'Pink', 'Red', 'Salad', 'Violet', 'Yellow'];

export default Demo;

Accessible name

If your FilterTrigger doesn't have a <label> element, use aria-labelledby or aria-label.

If the filter name is included in the trigger alongside the value, hide it from the assistive technology to avoid redundant reading.

tsx
import React from 'react';
import { FilterTrigger } from '@semcore/base-trigger';
import Select from '@semcore/select';
import { Flex } from '@semcore/flex-box';

const Demo = () => {
  const [material, setMaterial] = React.useState([]);

  return (
    <Flex gap={2}>
      <Select>
        <Select.Trigger tag={FilterTrigger} placeholder='Language' aria-label='Language' />
        <Select.Menu aria-label='Language'>
          {languages.map((option, idx) => (
            <Select.Option key={idx} value={option}>
              {option}
            </Select.Option>
          ))}
        </Select.Menu>
      </Select>
      <Select onChange={setMaterial} multiselect>
        <Select.Trigger tag={FilterTrigger} placeholder='Material' aria-label='Material'>
          <span aria-hidden>Material: </span>
          {material.length === 1 ? material : `${material.length} selected`}
        </Select.Trigger>
        <Select.Menu aria-label='Material'>
          {materials.map((option, idx) => (
            <Select.Option value={option} key={idx}>
              <Select.Option.Checkbox />
              {option}
            </Select.Option>
          ))}
        </Select.Menu>
      </Select>
    </Flex>
  );
};

const languages = [
  'Chinese',
  'English',
  'French',
  'German',
  'Italian',
  'Korean',
  'Spanish',
  'Turkish',
];
const materials = ['Glass', 'Metal', 'Paper', 'Wood'];

export default Demo;

Advanced filters with counter

For an example of using FilterTrigger with Dropdown and graphic counter, refer to Advanced filters.

Programmatic focus

FilterTrigger contains two elements in the wrapper: the button that opens the dropdown (the inner trigger) and the Clear button. If you want to focus the inner trigger, use the triggerRef prop to access the inner trigger node.

tsx
import React from 'react';
import { FilterTrigger } from '@semcore/base-trigger';
import Select from '@semcore/select';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';
import Button from '@semcore/button';

const Demo = () => {
  const triggerRef = React.useRef<HTMLButtonElement>(null);
  const focusTrigger = React.useCallback(() => {
    triggerRef.current?.focus();
    triggerRef.current?.click();
  }, []);

  return (
    <>
      <Text tag='label' htmlFor='controlled-filter-trigger' id='controlled-filter-label' size={200}>
        Controlled filter
      </Text>
      <Flex gap={2} mt={2}>
        <Select>
          <Select.Trigger
            tag={FilterTrigger}
            triggerRef={triggerRef}
            id='controlled-filter-trigger'
          />
          <Select.Menu aria-labelledby='controlled-filter-label'>
            {options.map((option, idx) => {
              const { title } = option;
              return (
                <Select.Option value={title} key={idx}>
                  {title}
                </Select.Option>
              );
            })}
          </Select.Menu>
        </Select>
        <Button onClick={focusTrigger}>Focus the filter trigger</Button>
      </Flex>
    </>
  );
};

const options = Array(6)
  .fill(0)
  .map((i, idx) => ({
    title: `Option ${idx}`,
  }));

export default Demo;

Last updated:

Released under the MIT License.

Released under the MIT License.