Socket
Socket
Sign inDemoInstall

@finastra/textfield

Package Overview
Dependencies
3
Maintainers
3
Versions
55
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@finastra/textfield

TextField Web Component


Version published
Maintainers
3
Weekly downloads
24
increased by9.09%

Weekly downloads

Readme

Source

TextField

See it on NPM! How big is this package in your project? Storybook

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
PropertyAttributeModifiersTypeDefaultDescription
autoValidateboolean
autocapitalizestring
charCounterboolean | "external" | "internal"
densedensebooleanfalse
disabledbooleanDisabled state for the component. When disabled is set to true, the
component will not be added to form submission.
endAlignedboolean
helperstring
helperPersistentbooleantrue
iconstring
iconTrailingstring
inputModeTextFieldInputMode
labelstring
labelInsidelabelInsidebooleanfalse
maxstring | number
maxLengthnumber
minstring | number
minLengthnumber
namestring
outlinedbooleantrue
override
patternstring
placeholderstring
prefixstring
readOnlyboolean
requiredboolean
ripplereadonlyPromise<RippleInterface | null> | undefinedImplement ripple getter for Ripple integration with mwc-formfield
selectionEndreadonlynumber | null
selectionStartreadonlynumber | null
showActionButtonshowActionButtonbooleanfalse
sizenumber | null
stepnumber | "any" | nullstep 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.
suffixstring
typeTextFieldType
validateOnInitialRenderboolean
validationMessagestring
validityreadonlyValidityState
validityTransform((value: string, nativeValidity: ValidityState) => Partial<ValidityState>) | null
valuestring
willValidatereadonlyboolean
Methods
MethodType
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
PropertyAttributeModifiersTypeDefaultDescription
autoValidateboolean
autocapitalizestring
charCounterboolean | "external" | "internal"
densedensebooleanfalseSmaller text field size.
disableddisabledbooleanfalseDisabled state for the component. When disabled is set to true, the
component will not be added to form submission.
endAlignedboolean
helperhelperstring""Helper text to display below the input.
helperPersistentbooleantrue
iconiconstring""Leading icon to display in input. See fds-icon.
iconTrailingiconTrailingstring""Leading icon to display in input. See fds-icon.
inputModeTextFieldInputMode
labellabelstring"textfield"Sets floating label value.
labelInsidelabelInsidebooleanfalseIs the label included in the text field.
maxstring | number
maxLengthnumber
minstring | number
minLengthnumber
namestring
outlinedbooleantrue
override
patternpatternstring""A JavaScript regular expression. The textfield value must match this pattern.
placeholderplaceholderstring"textfield"Sets placeholder value displayed when input is empty.
prefixstring
readOnlyboolean
requiredrequiredbooleanfalseDisplays error state if value is empty and input is blurred.
ripplereadonlyPromise<RippleInterface | null> | undefinedImplement ripple getter for Ripple integration with mwc-formfield
selectionEndreadonlynumber | null
selectionStartreadonlynumber | null
showActionButtonshowActionButtonbooleanfalseEnable the use of a the actionButton slot.
sizenumber | null
stepnumber | "any" | nullstep 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.
stylesCSSResult[]["styles"]
suffixstring
typetypeTextFieldType""A string specifying the type of control to render.
validateOnInitialRenderboolean
validationMessagevalidationMessagestring""Message to show in the error color when the textfield is invalid. (Helper text will not be visible)
validityreadonlyValidityState
validityTransform((value: string, nativeValidity: ValidityState) => Partial<ValidityState>) | null
valuestring
willValidatereadonlyboolean
Methods
MethodType
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
NameDescription
actionButtonSlot to replace iconTrailing with an action button.
CSS Custom Properties
PropertyTypeDefaultDescription
--fds-icon-colorcolor"#694ED6"Icon color.
--fds-icon-trailing-colorcolor"#694ED6"Icon trailing color.
--fds-primarycolor"#694ED6"TextField color
--fds-text-field-radiustext"4px"Border radius of the outline.

Keywords

FAQs

Last updated on 27 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc