@equinor/fusion-wc-textinput NPM

`<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****`	Note: requries `maxLength` to be set. Display character counter with max length.
`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.