@finastra/textfield NPM

TextField

Text fields let users enter and edit text.

The fds-textfield extends Material web's mwc-textfield-base.

Usage

Import

npm i @finastra/textfield

import '@finastra/textfield';
...
<fds-textfield label="Field me in"></fds-textfield>

Native pickers

Date pickers and Time pickers allow selecting a value from a standard format.

The TextField support date type="date", time type="time" and date&time type="datetime-local" pickers. See MDN web docs for more information about the different input types.

Example

<fds-textfield type="date" iconTrailing="calendar_today"></fds-textfield>

API

Properties

Property	Attribute	Modifiers	Type	Default	Description
`autoValidate`			`boolean`
`autocapitalize`			`string`
`charCounter`			`boolean \\| "external" \\| "internal"`
`dense`	`dense`		`boolean`	false
`disabled`			`boolean`		Disabled state for the component. When `disabled` is set to `true`, thecomponent will not be added to form submission.
`endAligned`			`boolean`
`helper`			`string`
`helperPersistent`			`boolean`	true
`icon`			`string`
`iconTrailing`			`string`
`inputMode`			`TextFieldInputMode`
`label`			`string`
`labelInside`	`labelInside`		`boolean`	false
`max`			`string \\| number`
`maxLength`			`number`
`min`			`string \\| number`
`minLength`			`number`
`name`			`string`
`outlined`			`boolean`	true
`override`
`pattern`			`string`
`placeholder`			`string`
`prefix`			`string`
`readOnly`			`boolean`
`required`			`boolean`
`ripple`		readonly	`Promise<RippleInterface \\| null> \\| undefined`		Implement ripple getter for Ripple integration with mwc-formfield
`selectionEnd`		readonly	`number \\| null`
`selectionStart`		readonly	`number \\| null`
`showActionButton`	`showActionButton`		`boolean`	false
`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`			`TextFieldType`
`validateOnInitialRender`			`boolean`
`validationMessage`			`string`
`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>`
`renderOutline`	`(): string \\| TemplateResult<ResultType>`
`reportValidity`	`(): boolean`
`select`	`(): void`
`setCustomValidity`	`(message: string): void`
`setSelectionRange`	`(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" \\| "backward" \\| "none" \\| undefined): void`

fds-textfield

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`	true
`icon`	`icon`		`string`	""	Leading icon to display in input. See `fds-icon`.
`iconTrailing`	`iconTrailing`		`string`	""	Leading icon to display in input. See `fds-icon`.
`inputMode`			`TextFieldInputMode`
`label`	`label`		`string`	"textfield"	Sets floating label value.
`labelInside`	`labelInside`		`boolean`	false	Is the label included in the text field.
`max`			`string \\| number`
`maxLength`			`number`
`min`			`string \\| number`
`minLength`			`number`
`name`			`string`
`outlined`			`boolean`	true
`override`
`pattern`	`pattern`		`string`	""	A JavaScript regular expression. The textfield value must match this pattern.
`placeholder`	`placeholder`		`string`	"textfield"	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`	`showActionButton`		`boolean`	false	Enable the use of a the actionButton slot.
`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.
`styles`			`CSSResult[]`	"styles"
`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>`
`renderOutline`	`(): string \\| TemplateResult<ResultType>`
`reportValidity`	`(): boolean`
`select`	`(): void`
`setCustomValidity`	`(message: string): void`
`setSelectionRange`	`(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" \\| "backward" \\| "none" \\| undefined): void`

Slots

Name	Description
`actionButton`	Slot to replace iconTrailing with an action button.

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.