Forms

Filter Sidebar Panel

Vertical catalog filter stack with collapsible checkbox groups and a price range, built on native details elements.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add filter-sidebar-panel

Built for astro.

Full docs for Filter Sidebar Panel →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.0

Filter Sidebar Panel

Props

Name	Type	Required	Default
action	string	No	'#'
method	string	No	'GET'
heading	string	No	'Filters'
groups	FilterGroup[]	No	[ { title: 'Category', name: 'category', open: true, options: [ { label: 'Furniture', value: 'furniture', count: 128 }, { label: 'Lighting', value: 'lighting', count: 64 }, { label: 'Textiles', value: 'textiles', count: 41 }, ]}, { title: 'Brand', name: 'brand', options: [ { label: 'Northbound', value: 'northbound', count: 22 }, { label: 'Ferro & Co', value: 'ferro', count: 18 }, ]}, ]
minPrice	number	No	0
maxPrice	number	No	2000
applyLabel	string	No	'Apply filters'
clearLabel	string	No	'Clear all'
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/filter-sidebar-panel/FilterSidebarPanel.astro

Using the Filter Sidebar Panel component

Install it with velocityx add filter-sidebar-panel. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Filter Sidebar Panel

Filters

Props

File this creates

Using the Filter Sidebar Panel component

Related components