filter

Filter

The parts of a storefront filter: option lists with counts and search, swatches, a price range, ratings and switches, in groups that open in place or as a popover and reset together.

States: Default, Focus, Disabled, Invalid

Parts

Part	File	Does
Filter	Filter.vue	Groups all parts of the filter and lets the user reset them together.
FilterField	FilterField.vue	Groups the title, control and description of one filter option.
FilterFieldContent	FilterFieldContent.vue	Stacks a filter option's label and description beside its control.
FilterFieldDescription	FilterFieldDescription.vue	Explains a filter option below its label.
FilterFieldLabel	FilterFieldLabel.vue	Labels the control of a filter option.
FilterFieldTitle	FilterFieldTitle.vue	Names a group of filter options.
FilterGroup	FilterGroup.vue	Shows a labelled set of filter options that opens and closes.
FilterList	FilterList.vue	Lists filter options with result counts that the user can toggle and search.
FilterTrigger	FilterTrigger.vue	Opens and closes a filter group, showing its label and count of active options.
FilterPrice	FilterPrice.vue	Lets the user limit products to a price range with a slider.
FilterRange	FilterRange.vue	Lets the user limit a value by typing a lowest and highest number.
FilterRating	FilterRating.vue	Lets the user limit products to those with a minimum star rating.
FilterReset	FilterReset.vue	Lets the user clear all filters at once.
FilterSlider	FilterSlider.vue	Lets the user limit a numeric value to a range with a slider.
FilterSwatch	FilterSwatch.vue	Lists colour options as swatches that the user can toggle.
FilterSwitch	FilterSwitch.vue	Lets the user turn a yes-or-no filter on or off.

Anatomy

<Filter>
  <FilterSwitch>
    <FilterField>
      <FilterFieldContent>
        <FilterFieldLabel />
        <FilterFieldDescription />
      </FilterFieldContent>
    </FilterField>
  </FilterSwitch>
  <FilterGroup>
    <FilterList />
    <FilterSwatch />
    <FilterPrice>
      <FilterSlider>
        <FilterField>
          <FilterFieldTitle />
          <FilterFieldDescription />
        </FilterField>
      </FilterSlider>
    </FilterPrice>
    <FilterRange>
      <FilterField>
        <FilterFieldTitle />
        <FilterFieldDescription />
      </FilterField>
    </FilterRange>
    <FilterRating>
      <FilterField>
        <FilterFieldTitle />
      </FilterField>
    </FilterRating>
  </FilterGroup>
  <FilterReset />
</Filter>

Styling

Part	Recipe
FilterField	filter-field
FilterFieldContent	filter-field-content
FilterFieldDescription	filter-field-description
FilterFieldLabel	filter-field-label
FilterFieldTitle	filter-field-title
FilterGroup	filter-group-content
FilterList	filter-list-root
FilterList	filter-list
FilterList	filter-list-search
FilterList	filter-list-item
FilterList	filter-list-check
FilterList	filter-meta
FilterTrigger	filter-trigger
FilterTrigger	filter-trigger-count
FilterRange	filter-range
FilterRange	filter-range-separator
FilterRating	filter-rating
FilterRating	filter-meta
FilterRating	filter-rating-star
FilterReset	filter-reset-root
FilterReset	filter-reset
FilterSlider	filter-slider
FilterSlider	filter-meta
FilterSwatch	filter-swatch
FilterSwatch	filter-meta
FilterSwatch	filter-swatch-text
FilterSwitch	filter-switch

Install

Writes 18 files into components/ui/filter/. For agents, npx @frontic/ui docs filter prints this reference as markdown; the MCP server serves the same.

Installs with it: button; collapsible; format; input-group; popover; rating; slider; swatch; swatch-group; switch
npm packages: @lucide/vue; @vueuse/core; class-variance-authority; reka-ui

Built from

Button Collapsible Input Group Popover Rating Slider Swatch Swatch Group Switch

API reference

Filter Filter.vue

Groups all parts of the filter and lets the user reset them together. Renders a <div>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

reset	(() => void)	—

Parts

Anatomy

Styling

Install

Built from

API reference

Filter Filter.vue

FilterField FilterField.vue

FilterFieldContent FilterFieldContent.vue

FilterFieldDescription FilterFieldDescription.vue

FilterFieldLabel FilterFieldLabel.vue

FilterFieldTitle FilterFieldTitle.vue

FilterGroup FilterGroup.vue

FilterList FilterList.vue

FilterTrigger FilterTrigger.vue

FilterPrice FilterPrice.vue

FilterRange FilterRange.vue

FilterRating FilterRating.vue

FilterReset FilterReset.vue

FilterSlider FilterSlider.vue

FilterSwatch FilterSwatch.vue

FilterSwitch FilterSwitch.vue