FilterInput Component

API reference

FilterInput

Filter Input is a compact search/text field for filtering a collection. It replaces the small ad-hoc search inputs that sit in toolbars and table headers. By default it renders inline as a small search field with a leading search icon; set mode="chip" to collapse it behind a chip button that opens the input in a popout, which is handy in a crowded filter toolbar. It emits intent only: input as the user types and change when the value is committed. Your app owns the active filters and any URL/query state — read the value from the event target (or bind value) and filter accordingly. It is a control only, like Combobox: compose it inside a Field for a visible label, or set label for an accessible name when used standalone.

<nord-filter-input></nord-filter-input>

Props

Property	Attribute	Description	Type	Default
`mode`	`mode`	How the input is presented. - `inline` (default) renders the search field directly. - `chip` collapses the field behind a chip button that opens a popout containing the input.	`'inline' \| 'chip'`	`'inline'`
`open`	`open`	Whether the chip-mode popout is open. Only meaningful with `mode="chip"`.	`boolean`	`false`
`size`	`size`	The size of the search control. Defaults to `s` to match the other filter controls in a compact filter bar; set `m` or `l` to enlarge it.	`'s' \| 'm' \| 'l'`	`'s'`
`clearable`	`clearable`	Whether to show a clear (✕) button while there is a value. Clearing resets the value to `''`, then fires `input` and `change`.	`boolean`	`false`
`placeholder`	`placeholder`	Placeholder text to display within the control.	`string \| undefined`	—
`required`	`required`	Determines whether the control is required or not. A required control is announced as such to assistive technology and, inside a `<nord-field>`, drives the required indicator on the `<nord-field-label>`. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.	`boolean`	`false`
`readonly`	`readonly`	Makes the component readonly, so that it is not editable. Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.	`boolean`	`false`
`disabled`	`disabled`	Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the form component.	`string \| undefined`	—
`value`	`value`	The value of the form component.	`string`	`''`
`form`	`form`	Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.	`HTMLFormElement \| null`	—

Field properties

Provided by the control for standalone use; ignored when the control is wrapped in a nord-field, which takes over the label, description and error.

Property	Attribute	Description	Type	Default
`label`	`label`	Label for the control. Ignored when the control is wrapped in a `<nord-field>`, which provides the label via `<nord-field-label>`.	`string`	`''`
`hint`	`hint`	Optional hint text shown with the control. Ignored inside a `<nord-field>`, which provides it via `<nord-field-description>`.	`string \| undefined`	—
`hintBelow`	`hint-below`	Renders the hint below the control and any error instead of below the label.	`boolean`	`false`
`hideLabel`	`hide-label`	Visually hide the label, but still expose it to assistive technologies.	`boolean`	`false`
`error`	`error`	Optional error shown with the control. Ignored inside a `<nord-field>`, which provides it via `<nord-field-error>`.	`string \| undefined`	—
`hideRequired`	`hide-required`	Visually hide the required indicator, but still expose the required state to assistive technologies.	`boolean`	`false`

Slots

Slot name	Description
`start`	Leading icon/content; defaults to a search icon.
`end`	Trailing icon/content before the clear button.

Methods

Method name	Parameters	Description
`show() => void`	N/A	Open the chip popout.
`hide() => void`	N/A	Close the chip popout.
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

Event	Detail Type	Description
`input`	`NordEvent`	Dispatched as the user types into the input.
`change`	`NordEvent`	Dispatched when the value is committed.
`open`	`NordEvent`	Dispatched when the chip-mode popout is opened.
`close`	`NordEvent`	Dispatched when the chip-mode 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-input-inline-size`	Controls the inline size, or width, of the inline input.	—

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.

Dependencies

This component is internally dependent on the following components:

FilterInput Light DOM & Tailwind