Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

autoResetautoResetbooleanSets an automatic reset of active filters if all filters are triggered

multiplemultiplebooleanSets if the filter group can filter multiple filters simultaneously

resetresetbooleanShows a reset button if one or more filters are active

labelstringSets the label of the filter group

Panoramica

The <mds-filter> web component is a compound container that groups a set of <mds-filter-item> chips into a single, scrollable filter bar, coordinating their selection state and exposing the active values as one combined change event. It has no native HTML equivalent: it orchestrates its children rather than rendering a control of its own.

Semantic Behavior

Compound parent: Acts as the controller for slotted <mds-filter-item> children, driving their state in response to selection events.Group of toggles: The host is a group named by label, and each item is a toggle button whose pressed state follows its selection: a screen reader hears which filters are on and how many results each one shows. Every item is a Tab stop; there is no arrow-key navigation.Selection coordination: In single mode it enforces exclusive selection (selecting one deselects the others); in multiple mode it keeps every selected child active and tracks how many are selected.Selection set by the application: The selection lives on the items’ selected. Setting or clearing it from the application, or rendering an item already selected, is taken in as after a click: in single mode only the last item set stays selected, the reset button shows or hides, the strip scrolls to the item. No mdsFilterChange is emitted for it, and autoReset does not apply: the application already knows. Two items selected in the markup of a single-mode bar leave the last one selected, as a <select> does.Combined change event: mdsFilterChange fires whenever the user changes the selection (an item, or the reset button), carrying both the NodeList of the children and a comma-joined string of the selected items’ values.Reset control: When reset is set, a clear-all button appears once a filter is active, named in the page language (the lang of <html>) (“Clear filters”). A click clears all selections and emits mdsFilterChange with an empty value. While no filter is active the button is scaled away, out of the tab order and of the accessibility tree; without reset it is not rendered at all.Auto-scroll: On each selection the bar scrolls horizontally to center the most recently selected item.Default slot: The default slot is for <mds-filter-item> elements only, not arbitrary text or markup.

Properties & Visual Configurations

multiple switches the bar from exclusive single-select behavior to allowing several items active at once; choose it when filters are additive rather than mutually exclusive.reset opts the bar into showing a dedicated clear-all control whenever one or more filters are active.autoReset automatically clears all selections once every item has been selected - useful in multiple mode where “all selected” is equivalent to “no filter applied”.

Dipendenze

Usa: mds-text, mds-filter-item