All components (204)

Filter group

Choice · FilterGroup · .amset-facets

What it is and when to use it

A group of facets from a store's filter column: checkboxes with their counter ("White gold (18)"), "Show the remaining 3" when there are many, a search box for long lists and "Clear" as soon as something is checked.

When to use it

Catalog filters that add up: metal, collection, size, brand.
maxVisible (6 by default) cuts the list; the button says how many are missing, not a bare "Show more". What is checked is never hidden: a checked option beyond the maximum stays in view when collapsed, and does not count among those that are missing.
search when there are many options: it filters ignoring accents and case and, if nothing is left, says "No matches".
count is only the counter: an option with 0 does not disable itself, that is decided by its disabled.
withClear={false} removes "Clear" when the group does not need it.

When not to

The price, or any range of numbers: RangeFilter.
A single option among several: RadioGroup, or SegmentedGroup if it is applied right away.
Showing the filters already set so they can be removed one by one: AppliedFilters.

Keyboard: each checkbox is a Tab stop and Space ticks and unticks it. The search box, "Clear" and "Show the remaining N" are a normal field and normal buttons.

Accessibility: it is a real group of checkboxes named like the title, so the screen reader says "Metal, group" on entering. The counter goes inside the name of each checkbox ("White gold (18)"), not loose beside it, where it would get lost on the way. The search box is named "Search in metal".

States and motion: each checkbox brings its states (hover, focus, checked, disabled); the counter of a disabled one turns to the disabled gray along with the rest. What appears (the checkboxes when expanding or searching, "Clear", "No matches") enters with a short fade; what was already there does not move. The header is as tall as the "Clear" button, so it does not jump when the first one is checked. disabled turns off the checkboxes and "Clear" at once (while results arrive, for example); searching and "Show more" keep working, since looking does not change any filter.

Sizes: sm, md (default) and lg apply to the checkboxes, the search box and the title; "Clear" and "Show more" go one step below (sm, sm and md).

Fine-tuning: CSS variables on .amset-facets: --amset-facets-title (the font of the title, and that of "No matches"), --amset-facets-slot (between checkboxes), --amset-facets-header (the height of the header) and --amset-facets-count (the color of the counter). Each checkbox is adjusted with the --amset-checkbox-*.

What it looks like

<FilterGroup
  title="Size"
  options={[{ key: 's', label: 'S', count: 12 }]}
  value={elegidas}
  onChange={setElegidas}
/>

Props

Import it with import { FilterGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`onChange`required	`(keys: readonly string[]) => void`	—
`options`required	`readonly FacetOption[]`	—
`title`required	`string`	Title of the group: "Brand", "Size", "Price". It is what names the group.
`value`required	`readonly string[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	Nothing is checked or cleared (while results are arriving, for example). Search and "Show more" keep working: looking at the rest does not change any filter.
`maxVisible`	`number`	How many are shown before "Show more". 6 by default. What is checked is always shown.
`search`	`boolean`	Search field for when there are many options.
`size`	`"sm" \| "md" \| "lg"`	Checkboxes, search box, title and buttons at once: `sm`, `md` (the default) or `lg`. The "Clear" and "Show more" buttons go one step below.
`withClear`	`boolean`	Button to clear this group. It appears only when something is checked.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-facets-title`	`var(--amset-text-sm)`
`--amset-facets-slot`	`var(--amset-space-2)`
`--amset-facets-header`	`var(--amset-height-control-sm)`
`--amset-facets-count`	`var(--amset-ink-3)`

How to change it

.amset-facets {
  --amset-facets-title: ...;
  --amset-facets-slot: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: