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. |