API reference
FilterDate
Filter Date is a self-contained single-date **filter**: a chip that opens a
popout containing an inline Calendar. It is the
single-date counterpart to Filter Date Range
and renders the shared filter chip via Filter Field.
Composition-first: it emits change/clear/remove and leaves the active
filters and any URL/query state to your app.
<nord-filter-date></nord-filter-date>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
label | label | The label naming what this filter targets, shown on the chip. | string | '' |
value | value | The committed date as an ISO-8601 string YYYY-MM-DD, or "" for none. | string | '' |
min | min | Earliest selectable date (ISO-8601). | string | undefined | — |
max | max | Latest selectable date (ISO-8601). | string | undefined | — |
firstDayOfWeek | first-day-of-week | First day of the week (0 = Sunday … 6 = Saturday). | number | undefined | — |
today | today | Overrides "today" (ISO-8601), mainly for deterministic tests/demos. | string | undefined | — |
removable | removable | Whether the whole filter can be removed. When true the trailing affordance
is a remove button that fires remove; otherwise it is a clear button. | boolean | false |
clearable | clearable | Shows a clear (✕) button while there is a selection. Defaults to true. | boolean | true |
disabled | disabled | Makes the component disabled. | boolean | false |
size | size | The size of the chip controls. | 's' | 'm' | 'l' | 's' |
name | name | Identifies the filter (e.g. for your app's active-filter state). | string | '' |
open | open | Whether the popout is open. | boolean | false |
Methods
| Method name | Parameters | Description |
|---|---|---|
show() => void | N/A | Open the popout. |
hide() => void | N/A | Close the popout. |
| Event | Detail Type | Description |
|---|---|---|
change | FilterDateChangeEvent | Dispatched when the committed date changes (selection or clear). |
clear | FilterDateClearEvent | Dispatched when the chip's clear affordance is pressed. |
remove | FilterDateRemoveEvent | Dispatched when the chip's remove affordance is pressed. |
open | NordEvent | Dispatched when the popout is opened. |
close | NordEvent | Dispatched when the popout is closed. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-filter-date-popout-inline-size | Controls the inline size of the popout content. | — |
Dependencies
This component is internally dependent on the following components:
- <nord-calendar>
Calendar
Calendar allows user to pick a date. It comes with built-in functionality that allows you to set a minimum and a maximum allowed date. Please note that the date must be passed in ISO-8601 format.
- <nord-filter-field>
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-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-popout>
Popout
Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.