<!--prettier-ignore-start--> # `<fusion-wc-textinput>` [](https://www.npmjs.com/package/@equinor/fusion-wc-textinput)
npm install @equinor/fusion-wc-textinputsh
npm install @equinor/fusion-wc-textinput
`Example Usage
html
`$3
Name | Type | Description
------------------------- | ----------------------------- | -----------
| 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*\|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.
`ts
type TextInputType = 'text'|'search'|'tel'|'url'|'email'|'password'|
'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';
`\\
is exported by fwc-textinput.
`ts
export type TextInputVariant = 'filled' | 'outlined';
`\\\*
is exported by fwc-icon.
`ts
type IconName = keyof typeof edsIcons | string;
`\\\\
is exported by fwc-textinput.
`ts
type TextInputCharCounter = 'external' | 'internal';
`\\\\\*
is exported by fwc-textinput.
`ts
type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial
`\\\\\\ The
property should only be used for browser autofill as webcomponent form participation does not currently consider the name attribute. See #289.$3
| 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 .
| 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 | 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.$3
follows the basic constraint validation model.
It exposes:*
required
*
*
*
*
*
*
*
*
*
* Additionally, it implements more features such as:
*
*
* and By default,
will report validation on blur`.