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
`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`, the component 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 native input 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.

Package detail

@finastra/search-input

readme