@equinor/fusion-wc-textarea
v1.1.2
Published
<!--prettier-ignore-start--> # `<fusion-wc-textarea>` [![Published on npm](https://img.shields.io/npm/v/@equinor/fusion-wc-textarea.svg)](https://www.npmjs.com/package/@equinor/fusion-wc-textarea)
Downloads
1,053
Readme
<fusion-wc-textarea>
Installation
npm install @equinor/fusion-wc-textarea
Example Usage
<fwc-textarea label='My Label' icon="settings" rows='3' cols='4'></fwc-textarea>
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.
rows
| number
| Sets number of visible text lines.
cols
| number
| Sets the visible width of the textarea.
placeholder
| string
| Sets disappearing input placeholder.
prefix
| string
| Prefix text to display before the input.
suffix
| string
| Suffix text to display after the input.
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 textarea 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 textarea.
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';
*** 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 textarea passes validity checks. Returns false
and fires an invalid
event on the textarea otherwise. NOTE: When accessing any property or function that checks validity at textarea initial boot up, you may have to await <fwc-textarea>.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 textarea 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-textarea>
follows the basic <input>
constraint validation model.
It exposes:
required
maxLength
pattern
min
max
step
validity
willValidate
checkValidity()
reportValidity()
setCustomValidity(message)
Additionally, it implements more features such as:
validationMessage
validateOnInitialRender
- and
validityTransform
By default, <fwc-textarea>
will report validation on blur
.