npm install @equinor/fusion-wc-textarea
<fwc-textarea label='My Label' icon="settings" rows='3' cols='4'></fwc-textarea>
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***` |
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.
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. |
<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
.