# Filter Source: https://lumeo.nativ.sh/components/filter # Filter Composable filter pills and bar for building advanced data filtering interfaces. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo.DataGrid One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo Preview Code Filters with various field types Add Filter Preview Code Filters with search input Select an option Preview Code Filters with multi-select Category Select an option Preview Code Filters with data table Select an option Select an option ID Task Status Priority Assignee 1001 Migrate database to PostgreSQL 16 Active High JD John Davis 1002 Redesign onboarding flow Active Medium SC Sarah Chen 1003 Q1 campaign landing page Pending High LP Lisa Park 1004 Fix checkout timeout errors Active Critical MT Mike Torres 1005 Update sales deck for Enterprise Inactive Low JD John Davis 1006 Implement SSO integration Active High SC Sarah Chen 1007 Customer feedback analysis Pending Medium LP Lisa Park 1008 Design system color audit Inactive Low MT Mike Torres Showing 8 of 8 results Preview Code FilterPill styles Status: Active Priority: High Category: Engineering Assignee: Sarah Chen Search: "database" ## API Reference ### FilterPill Property Type Default Description Label string "" The filter category label displayed before the colon. Value string "" The active filter value displayed after the colon. OnDismiss EventCallback — Callback invoked when the dismiss button is clicked. Class string? null Additional CSS classes to apply to the pill. ### FilterBar Property Type Default Description ChildContent RenderFragment? null Primary content area for filter controls (buttons, selects, search). Pills RenderFragment? null Slot for FilterPill components showing active filters. Actions RenderFragment? null Slot for action buttons like "Clear all". Class string? null Additional CSS classes to apply to the bar container.