Preview

Usage

<cs-text-filter placeholder="Find resources"></cs-text-filter>
<cs-text-filter placeholder="Find resources" count-text="3 matches"></cs-text-filter>
<cs-text-filter disabled placeholder="Disabled"></cs-text-filter>

Properties

count-textstring default: ''

Accepts a human-readable, localized string that indicates the number of results. For example, "1 match" or "165 matches." If the total number of results is unknown, also include an indication that there may be more results than the number listed. For example, "25+ matches."

The count text is only displayed when filteringText isn't empty. When the countText or filteringText changes, it will be announced to assistive technologies.

disable-browser-autocorrectboolean

Specifies whether to disable browser autocorrect and related features. If you set this to true, it disables any native browser capabilities that automatically correct user input, such as autocorrect and autocapitalize. If you don't set it, the behavior follows the default behavior of the user's browser.

disabledboolean default: false

Specifies if the filtering input is disabled. For example, you can use it if you are fetching new items upon filtering change in order to prevent the user from changing the filtering text.

filtering-aria-labelstring default: ''

Adds an aria-label on the filtering input.

filtering-clear-aria-labelstring default: ''

Label for the filtering input clear button.

filtering-placeholderstring default: ''

Placeholder for the filtering input.

filtering-textstringrequired

The current value of the filtering input.

loadingboolean

Set to true while the related collection is loading (e.g. during an async filtering action). If set to true, the live announcement of countText by assistive technologies will be paused until it changes back to false.

Events

changeCustomEvent<TextFilterProps.ChangeDetail>

Called when a change in filtering is caused by a user interaction. The event detail contains the current filteringText.

delayedChangeCustomEvent<TextFilterProps.ChangeDetail>

Called after the user changes the value of the filtering input field and stops typing for a certain period of time. If you want a delayed handler to invoke a filtering API call, you can use this event in addition to onChange.