@finastra/textfield

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