This element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
Slots
default — Text content from the default slot will be used as the value of the component.
prefix — Renders content before the input.
suffix — Renders content after input.
helper-text — Renders content below the input.
value-missing — Renders content when the required validation fails.
too-long — Renders content when the maxlength validation fails.
too-short — Renders content when the minlength validation fails.
custom-error — Renders content when setCustomValidity(message) is set.
invalid — Renders content when the component is in invalid state (validity.valid = false).
CSS Parts
container — The main wrapper that holds all main input elements of the textarea.
input — The native input element of the igc-textarea.
label — The native label element of the igc-textarea.
prefix — The prefix wrapper of the igc-textarea.
suffix — The suffix wrapper of the igc-textarea.
helper-text — The helper text wrapper of the igc-textarea.

Properties

Section titled "Properties"

autocapitalize

Section titled "autocapitalize"

Controls whether and how text input is automatically capitalized as it is entered/edited by the user.

MDN documentation.

 
autocapitalize: string

autocomplete

Section titled "autocomplete"

Specifies what if any permission the browser has to provide for automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. Refer to this page for additional information.

 
autocomplete: string

inputMode

Section titled "inputMode"

Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.

MDN documentation

 
inputMode: string

label

Section titled "label"

The label for the control.

 
label: string

maxLength

Section titled "maxLength"

The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

 
maxLength: number

minLength

Section titled "minLength"

The minimum number of characters (UTF-16 code units) required that the user should enter.

 
minLength: number

outlined

Section titled "outlined"

Whether the control will have outlined appearance.

 
outlined: boolean

placeholder

Section titled "placeholder"

The placeholder attribute of the control.

 
placeholder: string

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean

resize

Section titled "resize"

Controls whether the control can be resized. When auto is set, the control will try to expand and fit its content.

 
resize: TextareaResize

rows

Section titled "rows"

The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 3.

 
rows: number

spellcheck

Section titled "spellcheck"

Controls whether the element may be checked for spelling errors.

 
spellcheck: boolean

validateOnly

Section titled "validateOnly"

Enables validation rules to be evaluated without restricting user input. This applies to the maxLength property when it is defined.

 
validateOnly: boolean

value

Section titled "value"

The value of the component

 
value: string

wrap

Section titled "wrap"

Indicates how the control should wrap the value for form submission. Refer to this page on MDN for explanation of the available values.

 
wrap: "off" | "hard" | "soft"

Methods

Section titled "Methods"

scrollTo

Section titled "scrollTo" 
scrollTo(options: ScrollToOptions): void

Parameters

  • options: ScrollToOptions

Returns void

select

Section titled "select"

Selects all text within the control.

select(): void

Returns void

setRangeText

Section titled "setRangeText"

Replaces the selected text in the control.

setRangeText(replacement: string, start: number, end: number, selectMode: RangeTextSelectMode): void

Parameters

Returns void

setSelectionRange

Section titled "setSelectionRange"

Sets the text selection range of the control

setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): void

Parameters

Returns void

Events

Section titled "Events"

onChange

Section titled "onChange"

Emitted when the a change to the control value is committed by the user.

onChange(args: CustomEvent<string>): void

Parameters

Returns void

onInput

Section titled "onInput"

Emitted when the control receives user input.

onInput(args: CustomEvent<string>): void

Parameters

Returns void