Textarea

We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

Usage

Disabled

Read Only

Placeholder

With Error Message

You add the error property to show an invalid textarea.

With Error Message as slot

You add the error-msg slot to show an invalid textarea.

Help text

Max length

Slots

error-msg: The error message of the textarea.

Accessibility

Built with a native <textarea> element.
Visual and ARIA labeling support.
Change, clipboard, composition, selection, and input event support.
Required and invalid states exposed to assistive technology via ARIA.
Support for description and error message help text linked to the input via ARIA.

API

Properties

Property	Attribute	Description	Type	Default
`ariaDescribedBy`	`aria-described-by`	aria-describedby attribute for the textarea field	`string`	`undefined`
`ariaLive`	`aria-live`	aria-live attribute for the textarea field	`string`	`undefined`
`autocorrect`	`autocorrect`	This prop decides if the textarea field should be autocorrected or not	`"off" \| "on"`	`'off'`
`autofocus`	`autofocus`	This prop decides if the textarea field should be autofocused or not	`boolean`	`false`
`disabled`	`disabled`	This prop decides if the textarea field should be disabled or not	`boolean`	`false`
`error`	`error`	Show an error message	`string`	`''`
`helpText`	`help-text`	Show a help text	`string`	`undefined`
`label`	`label`	The label text of the textarea field	`string`	`undefined`
`maxlength`	`maxlength`	The maximum length of the textarea field	`number`	`undefined`
`messagePlacement`	`message-placement`	This prop decides if the messages should render between the label of an textarea and the textarea field, or below the textarea field.	`"below" \| "inside"`	`'inside'`
`name`	`name`	The name of the textarea field	`string`	`undefined`
`noResize`	`no-resize`	This prop decides if the textarea field should be resizable or not	`boolean`	`false`
`placeholder`	`placeholder`	The placeholder text of the textarea field	`string`	`undefined`
`readonly`	`readonly`	This prop decides if the textarea field should be readonly or not	`boolean`	`false`
`required`	`required`	This prop decides if the textarea field is required or not	`boolean`	`false`
`selectOnFocus`	`select-on-focus`	This prop decides if all content inside the textarea should be selected when it gets focus	`boolean`	`undefined`
`spellCheck`	`spell-check`	This prop decides if the textarea field should be spellchecked or not	`"false" \| "true"`	`'false'`
`uuid`	`uuid`	A unique identifier for the textarea component.	`string`	`anchor-textarea-${uuidv4()}`
`value`	`value`	The value in the textarea field. Use this to set a value and read it	`string`	`''`

Events

Event	Description	Type
`blurevent`	Event emitted when the user blurs the textarea field	`CustomEvent<any>`
`clearevent`	Event emitted when the user clears the textarea field	`CustomEvent<any>`
`focusevent`	Event emitted when the user is focusing the textarea field	`CustomEvent<any>`
`inputChange`	Event emitted when the textarea value is changed. Only triggers when focus leaves the textarea element	`CustomEvent<any>`
`inputEvent`	Event emitted when the user is inputting something into the input field	`CustomEvent<any>`

Methods

`focusTextarea() => Promise<void>`

Returns

Type: Promise<void>

Dependencies

Depends on

Graph

graph TD;
  anchor-textarea --> anchor-label
  anchor-textarea --> anchor-icon
  style anchor-textarea fill:#f9f,stroke:#333,stroke-width:4px

On this page