Search Input

<fds-search-input> delivers a single input field with a "reset" button as well as a loader and a mangifying glass icon with which to power search interactions.

Search Input Component extends fds-base-textfield component, so it inherits all capacity of fds-textfield

Usage

Import

npm i @finastra/search-input

import '@finastra/search-input';
...
<fds-search-input showClearButton label="Search"></fds-search-input>

API

Properties

| Property | Attribute | Modifiers | Type | Default | Description | |---------------------------|---------------------|-----------|--------------------------------------------------|--------------|--------------------------------------------------| | autoValidate | | | boolean | | | | autocapitalize | | | string | | | | charCounter | | | boolean \| "external" \| "internal" | | | | dense | dense | | boolean | false | Smaller text field size. | | disabled | disabled | | boolean | false | Disabled state for the component. When disabled is set to true, thecomponent will not be added to form submission. | | endAligned | | | boolean | | | | helper | helper | | string | "" | Helper text to display below the input. | | helperPersistent | | | boolean | | | | icon | icon | | string | "search" | Leading icon to display in input. See fds-icon. | | iconTrailing | | | string | | | | inputMode | | | TextFieldInputMode | | | | label | label | | string | "" | Sets floating label value. | | labelInside | labelInside | | boolean | false | Is the label included in the text field. | | loading | loading | | boolean | false | Display searchInput loader. | | max | | | string \| number | | | | maxLength | | | number | | | | min | | | string \| number | | | | minLength | | | number | | | | name | | | string | | | | outlined | | | boolean | | | | pattern | | | string | | | | placeholder | placeholder | | string | "Search ..." | Sets placeholder value displayed when input is empty. | | prefix | | | string | | | | readOnly | | | boolean | | | | required | required | | boolean | false | Displays error state if value is empty and input is blurred. | | ripple | | readonly | Promise<RippleInterface \| null> \| undefined | | Implement ripple getter for Ripple integration with mwc-formfield | | selectionEnd | | readonly | number \| null | | | | selectionStart | | readonly | number \| null | | | | showActionButton | | | boolean | false | | | showClearButton | showClearButton | | boolean | false | Show clear button. | | size | | | number \| null | | | | step | | | number \| "any" \| null | | step can be a number or the keyword "any".Use String typing to pass down the value as a string and let the nativeinput cast internally as needed. | | suffix | | | string | | | | type | type | | TextFieldType | "" | A string specifying the type of control to render. | | validateOnInitialRender | | | boolean | | | | validationMessage | validationMessage | | string | "" | Message to show in the error color when the textfield is invalid. (Helper text will not be visible) | | validity | | readonly | ValidityState | | | | validityTransform | | | ((value: string, nativeValidity: ValidityState) => Partial<ValidityState>) \| null | | | | value | | | string | | | | willValidate | | readonly | boolean | | |

Methods

| Method | Type | |----------------------|--------------------------------------------------| | blur | (): void | | checkValidity | (): boolean | | click | (): void | | focus | (): void | | layout | (): Promise<void> | | renderTrailingIcon | (): string \| TemplateResult<ResultType> | | reportValidity | (): boolean | | select | (): void | | setCustomValidity | (message: string): void | | setSelectionRange | (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" \| "backward" \| "none" \| undefined): void |

Events

| Event | |---------| | input |

CSS Custom Properties

| Property | Type | Default | Description | |-----------------------------|-------|-----------|-------------------------------| | --fds-icon-color | color | "#694ED6" | Icon color. | | --fds-icon-trailing-color | color | "#694ED6" | Icon trailing color. | | --fds-primary | color | "#694ED6" | TextField color | | --fds-text-field-radius | text | "4px" | Border radius of the outline. |