Shop

Filter Off Canvas

Off-canvas filter sheet for product listing pages with accordion-grouped checkbox lists, swatch lists, range sliders, and switches.

Overview

FilterOffCanvas is the full filter sheet that opens from FilterBar. It composes a stack of FilterOffCanvasAccordionItems, each rendering one typed inner control based on the shape of the filter you pass in:

Inner control	Filter type
`FilterOffCanvasSwitchItem`	Boolean filters (rendered at the accordion level, not inside an accordion item).
`FilterOffCanvasCheckboxList`	List filters with `presentation: 'text'` (rendered with `*ListItem` rows).
`FilterOffCanvasSwatchList`	List filters with `presentation: 'swatch'`; binds `SwatchOption` directly.
`FilterOffCanvasRangeSlider`	Numeric range filters with optional `step` and `formatLabel`.

Define your filter shape once via the AvailableFilter union and FilterOffCanvas mounts the right inner control per filter type.

The sheet's primary CTA reads "Show N products" from the filteredCount prop, so the count of matching products needs to be passed in alongside the filter definitions. A secondary "Delete all" button resets every selection to its empty value in one click.

Auto-import tag: <LFilterOffCanvas>.

Key Business & UX Benefits

Typed inner controls (checkbox lists, swatches, range sliders, switches) match each filter to the right input pattern, which raises filter-use rate and shortens time-to-product.
Accordion grouping keeps long filter lists scannable, so shoppers can find size or color without scrolling past every facet.
Single AvailableFilter shape drives the whole sheet, so adding a new facet in your data model needs no extra UI code.
Off-canvas presentation reclaims the listing grid behind it, letting shoppers see filter results in context rather than on a separate page.

Pro-Tip from Larry: Define your filter shape once via the AvailableFilter union; FilterOffCanvas picks the right inner control automatically per filter type.

Usage

LFilterOffCanvas

Feature List

Single AvailableFilter union picks the right inner control per filter (checkbox list, swatch list, range slider, or switch)
List filters honour a 'presentation' value of 'text' or 'swatch' to switch between rows and SwatchOption tiles
Range sliders accept optional step and formatLabel props so price, weight, and size facets render with the right unit
Primary CTA reads 'Show N products' from the filteredCount prop so shoppers see impact before applying the filter set
Secondary 'Delete all' button resets every selection to its empty value in one click
Accordion grouping keeps long facet lists scannable while keeping every filter one tap away
Composable from named inner primitives (AccordionItem, CheckboxList, SwatchList, RangeSlider, SwitchItem) for custom sheets

API Reference

LFilterOffCanvas

Prop	Default	Type
`filters`required		`AvailableFilter[]`
`filteredCount`required		`number`
`open`		`boolean`
`selected`		`object`

Event	Type
`update:open`	`(event: "update:open", value: boolean): void`
`update:selected`	`(event: "update:selected", value: SelectedFilters): void`

LFilterOffCanvasAccordionItem

Prop	Default	Type
`title`required		`string`
`activeValue`required		`string`
`icon`		`string`

Slot	Type
`default`	`{}`

Event	Type
`clearFilter`	`(event: "clearFilter"): void`

LFilterOffCanvasCheckboxList

Prop	Default	Type
`id`required		`string`
`items`required		`FilterOffCanvasCheckboxListItemProps[] { id, label, count, 1 more }`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`modelValue`		`string[]`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: string[] \| undefined): void`

LFilterOffCanvasCheckboxListItem

Prop	Default	Type
`id`required		`string`
`label`required		`string`
`count`		`number`
`itemSelected`		`boolean`

LFilterOffCanvasSwatchList

Prop	Default	Type
`items`required		`Omit<SwatchOptionProps, "selected">[]`
`id`		`string`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`modelValue`		`string[]`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: string[] \| undefined): void`

LFilterOffCanvasRangeSlider

Prop	Default	Type
`id`required		`string`
`min`required		`number`
`max`required		`number`
`step`		`number`
`formatLabel`		`(value: number): string`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`modelValue`		`SelectedFilterRange { min, max }`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: SelectedFilterRange \| undefined): void`

LFilterOffCanvasSwitchItem

Prop	Default	Type
`id`required		`string`
`label`required		`string`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`modelValue`		`boolean`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: boolean \| undefined): void`

Edit this pageorReport an issue

Filter Bar

Inline filter strip for product listing pages with current filters, sort, count, and an open-all-filters trigger.

Add to Cart

Add-to-cart button with quantity, loading, and disabled states.