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