@finastra/search-input NPM

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.