AI Filters
AI
Tuner
Block
Input/output constraint controls for AI generation. Configure language, format, content filters, and output constraints.
Card Variant
Full card with grouped filter rules
Filters
3 active filters
Language
Format
Filter profanity
Word count
to
Min and max word count
Excluded topics
Exclude
Topics to avoid
Inline Variant
Compact active filter pills
Filters:
Language: EnglishFilter profanity: trueWord count: 100,500Sidebar Variant
Vertical layout for sidebar panels
Filters
3
Language
Format
Filter profanity
Word count
to
Min and max word count
Excluded topics
Exclude
Topics to avoid
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
groups* | FilterGroup[] | — | Filter groups containing rules |
variant | 'card' | 'inline' | 'sidebar' | 'card' | Display variant |
onFilterChange | (groupId, ruleId, value) => void | — | Callback when a filter value changes |
onToggleFilter | (groupId, ruleId) => void | — | Callback when a filter is toggled |
onReset | () => void | — | Callback to reset all filters |
onApply | (activeFilters) => void | — | Callback when filters are applied |
showApply | boolean | false | Show apply button |
Usage
Import and examples
import { AIFilters } from '@/blocks/ai-tools/ai-filters'
<AIFilters groups={[ { id: 'content', label: 'Content', rules: [ { id: 'lang', label: 'Language', type: 'include', value: '', options: ['English', 'Dutch'] }, { id: 'safe', label: 'Safe mode', type: 'toggle', value: true }, ], }, ]} onFilterChange={(groupId, ruleId, value) => handleChange(groupId, ruleId, value)} onReset={() => resetFilters()}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Four rule types: Include, exclude, range, and toggle filter types
- Grouped filters: Organize rules into collapsible groups
- Active count: Shows number of active filters
- Per-filter toggle: Enable/disable individual filters
- Reset all: Clear all filters at once
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Checkboxes for filter toggleLabels for all filter inputsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between filter controls |
| Space | Toggle filter checkbox |
Notes
- Exclude filters visually marked with badge
- Disabled filters shown at reduced opacity