Filter Bar
Interactive filter controls that can search, reset, report active filters, emit change events, and drive a DataTable result surface.
Overview
The Filter Bar component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.
Why this exists
This component provides a reusable, accessible primitive for filter-bar use cases within the Byteion design system.
Mental model
Think of this component as a building block. Compose it with other Byteion primitives to build complex interfaces.
When to use
When not to use
Basic example
The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.
1. DataTable Toolbar Variant (With Inline Select Labels)
2. DataTable Toolbar Variant (Without Select Labels)
import { ClearFilters, FilterBar, FilterChip, FilterItem, Input, Select } from '@byteion/react';
export default function FilterBarDemo() {
return (
<FilterBar className="w-full">
<FilterItem>
<Input placeholder="Search customers" className="h-9" />
</FilterItem>
<FilterItem>
<Select defaultValue="active" aria-label="Status">
<option value="active">Active</option>
<option value="trialing">Trialing</option>
<option value="paused">Paused</option>
</Select>
</FilterItem>
<FilterChip>Enterprise</FilterChip>
<ClearFilters>Clear</ClearFilters>
</FilterBar>
);
}<script setup lang="ts">
import { FilterBar, Input, Select } from '@byteion/vue';
</script>
<template>
<FilterBar class="w-full">
<div data-bi-filter-item class="grid min-w-[10rem] gap-1.5 text-sm">
<Input placeholder="Search customers" class="h-9" />
</div>
<div data-bi-filter-item class="grid min-w-[10rem] gap-1.5 text-sm">
<Select model-value="active" aria-label="Status">
<option value="active">Active</option>
<option value="trialing">Trialing</option>
<option value="paused">Paused</option>
</Select>
</div>
<button type="button" data-bi-filter-chip class="inline-flex h-8 items-center gap-2 rounded-md border border-border bg-muted px-3 text-xs font-medium text-foreground">
Enterprise
</button>
<button type="button" data-bi-clear-filters class="h-8 rounded-md px-2 text-xs font-medium text-muted-foreground hover:text-foreground">
Clear
</button>
</FilterBar>
</template>Variants
Each variant communicates a different meaning. Choose based on priority, not aesthetics.
Single default variant.
Sizes
Size should match the importance and context of the component.
- md — md size.
States
This component reacts seamlessly to the following interaction and data states:
- default — Resting appearance before interaction.
- active — Currently selected or in use.
Anatomy
Usage guidelines
- Follow the design system tokens.
- Maintain consistent spacing.
Do and Don't
Do
- Follow accessibility guidelines.
- Maintain visual hierarchy.
Don't
- Do not hardcode colors.
- Do not nest interactive elements.
Accessibility
This component follows standard ARIA patterns for its role. Keyboard interaction matches the native HTML element behavior.
Role:search
ARIA Attributes
aria-labelaria-live
Keyboard Navigation
- Tab to controls
- Enter to submit/apply
- Reset button clears controls
Customization
Override visual appearance by modifying variables.css or Tailwind utility classes.
Compose with React cva()
Use the exportedcva() +cn() utilities to compose your own variant on top of the Byteion tokens.
import { cva, cn, type VariantProps } from '@byteion/react';
const myFilterBar = cva('base classes…', {
variants: {
accent: { soft:'border-primary-200', loud:'border-primary-500' },
},
defaultVariants: { accent:'soft' },
});
type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myFilterBar>;Compose with Vue cva()
Use the exportedcva() +cn() utilities inside standard Vue setup blocks.
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';
interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();
const myFilterBar = cva('base classes…', {
variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});
const cls = computed(() => myFilterBar({ accent: props.accent, class: attrs.class as string | undefined }));
</script>Runtime events
Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.
HTML / JS events
bi:filter-bar:applybi:filter-bar:changebi:filter-bar:resetbyteion:filter-applybyteion:filter-changebyteion:filter-reset
React callbacks
No React callback events are declared by this adapter.
Vue emits
No Vue emitted events are declared by this adapter.
Remote / AJAX
This component does not implement Byteion JS remote loading. Use normal HTML form submission, framework state, or your application data layer around it.
API Reference
No custom data attributes required. Uses standard HTML attributes.
HTML Data Attributes
No custom data attributes required.
Developer tips
Common mistakes
Production usage tips
data-bi-* attributes instead of styling hooks.
Premium examples
Advanced patterns available in Byteion Pro:
Related components
Unlock Premium Patterns
Get access to copy-paste ready Pro blocks, SaaS templates, and advanced data-tables built with this component.
Explore Pro Components