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
.
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.
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.
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;