ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated CheckboxCollapsible New Combobox New Command MenuDate PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Add ButtonFilter DateFilter Date RangeFilter DropdownFilter FieldFilter InputFilter Reset ButtonFooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

FilterField Light DOM & Tailwind

Filter Field is the presentation-only filter **chip**: a joined pill showing a leading icon, the filter's label, the active selection summary (value) and a clear or remove affordance, dashed while inactive. It is the shared chip used across the filter family and the building block for custom filters. It owns no popout and tracks no value — drop it into a popout-owning control as its slot="trigger" (the host opens/positions the popout and sets aria-controls/aria-haspopup/aria-expanded on this element). Show the active selection with value, reset it in response to clear, and remove the whole field in response to remove. Your app owns the active filters and any URL/query state.

API reference

FilterField

Filter Field is the presentation-only filter **chip**: a joined pill showing a leading icon, the filter's label, the active selection summary (value) and a clear or remove affordance, dashed while inactive. It is the shared chip used across the filter family and the building block for custom filters. It owns no popout and tracks no value — drop it into a popout-owning control as its slot="trigger" (the host opens/positions the popout and sets aria-controls/aria-haspopup/aria-expanded on this element). Show the active selection with value, reset it in response to clear, and remove the whole field in response to remove. Your app owns the active filters and any URL/query state.

<nord-filter-field></nord-filter-field>

Props

PropertyAttribute Description TypeDefault
labellabelThe label naming what this filter targets, shown on the chip.string''
valuevalueA short summary of the active selection (e.g. the selected option's label, or "3 selected"). When set the chip is shown as active and the clear button appears; leave it empty for an inactive filter. The chip does not derive this — set it from your app's state.string''
activeactiveForces the active (solid) treatment without a value summary, for filters that are on but have nothing short to show.booleanfalse
clearableclearableShows a clear (✕) button while the chip is active. Defaults to true. Has no effect when removable is set.booleantrue
iconiconThe leading icon shown on the chip.string'interface-filter'
namenameIdentifies the filter (e.g. for your app's active-filter state).string''
removableremovableWhether the whole field can be removed. When true the trailing affordance is a remove button that fires remove; otherwise it is a clear button (shown only when there is a value) that fires clear.booleanfalse
disableddisabledMakes the component disabled. This prevents users from being able to interact with it and conveys its inactive state to assistive technologies.booleanfalse
sizesizeThe size of the chip controls.'s' | 'm' | 'l''s'
EventDetail TypeDescription
clearFilterFieldClearEventDispatched when the clear affordance is pressed.
removeFilterFieldRemoveEventDispatched when the remove affordance is pressed.
Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.