<fusion-wc-textinput> 
Installation
npm install @equinor/fusion-wc-textinput
Example Usage
<fwc-textinput label='My Label' icon="settings"></fwc-textinput>
Properties/Attributes
| Name | Type | Description |
|---|---|---|
value | string | The input control's value. |
type | TextInputType* | A string specifying the type of control to render. |
variant | TextInputVariant** | Input style variant to render. |
label | string | Sets floating label value. |
placeholder | string | Sets disappearing input placeholder. |
prefix | string | Prefix text to display before the input. |
suffix | string | Suffix text to display after the input. |
icon | IconName*** | Leading icon to display in input. See fwc-icon. |
iconTrailing | IconName*** | Trailing icon to display in input. See fwc-icon. |
disabled | boolean | Whether or not the input should be disabled. |
charCounter | `boolean | TextInputCharCounter****` |
helper | string | Helper text to display below the input. Display default only when focused. |
helperPersistent | boolean | Always show the helper text despite focus. |
required | boolean | Displays error state if value is empty and input is blurred. |
maxLength | number | Maximum length to accept input. |
validationMessage | string | Message to show in the error color when the textinput is invalid. (Helper text will not be visible) |
pattern | string | HTMLInputElement.prototype.pattern (empty string will unset attribute) |
min | number|string | HTMLInputElement.prototype.min (empty string will unset attribute) |
max | number|string | HTMLInputElement.prototype.max (empty string will unset attribute) |
size | number|null | HTMLInputElement.prototype.size (null will unset attribute) |
step | number|null | HTMLInputElement.prototype.step (null will unset attribute) |
autoValidate | boolean | Reports validity on value change rather than only on blur. |
validity | ValidityState (readonly) | The ValidityState of the textinput. |
willValidate | boolean (readonly) | HTMLInputElement.prototype.willValidate |
validityTransform | ValidityTransform*****|null | Callback called before each validation check. See the validation section for more details. |
validateOnInitialRender | boolean | Runs validation check on initial render. |
name | string | Sets the name attribute on the internal input.*** |
* TextInputType is exported by fwc-textinput.
type TextInputType = 'text'|'search'|'tel'|'url'|'email'|'password'|
'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';
** TextInputVariant is exported by fwc-textinput.
export type TextInputVariant = 'filled' | 'outlined';
*** IconName is exported by fwc-icon.
type IconName = keyof typeof edsIcons | string;
**** TextInputCharCounter is exported by fwc-textinput.
type TextInputCharCounter = 'external' | 'internal';
***** ValidityTransform is exported by fwc-textinput.
type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial<ValidityState>
****** The name property should only be used for browser autofill as webcomponent form participation does not currently consider the name attribute. See #289.
Methods
| Name | Description |
|---|---|
checkValidity() => boolean | Returns true if the textinput passes validity checks. Returns false and fires an invalid event on the textinput otherwise. NOTE: When accessing any property or function that checks validity at textinput initial boot up, you may have to await <fwc-textinput>.updateComplete. |
reportValidity() => boolean | Runs checkValidity() method, and if it returns false, then it reports to the user that the input is invalid. |
setCustomValidity(message:string) => void | Sets a custom validity message (also overwrites validationMessage). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate. |
layout() => Promise<void> | Re-calculate layout. If a textinput is styled with display:none before it is first rendered, and it has a label that is floating, then you must call layout() the first time you remove display:none, or else the notch surrounding the label will not render correctly. |
Validation
<fwc-textinput> follows the basic <input> constraint validation model.
It exposes:
requiredmaxLengthpatternminmaxstepvaliditywillValidatecheckValidity()reportValidity()setCustomValidity(message)
Additionally, it implements more features such as:
validationMessagevalidateOnInitialRender- and
validityTransform
By default, <fwc-textinput> will report validation on blur.