npm

@equinor/fusion-wc-textarea
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

<fusion-wc-textarea> Published on npm

Storybook

Material Web Component

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***`
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.

Package Sidebar

Install

npm i @equinor/fusion-wc-textarea

Weekly Downloads

236

Version

1.1.2

License

ISC

Unpacked Size

458 kB

Total Files

16

Last publish

Collaborators

  • gustav-eikaas
  • eslsa
  • martinforre
  • _odin_