Class IgcTextareaComponent

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.

Element

igc-textarea

Slot

Text content from the default slot will be used as the value of the component.

Slot

prefix - Renders content before the input.

Slot

suffix - Renders content after input.

Slot

helper-text - Renders content below the input.

Slot

value-missing - Renders content when the required validation fails.

Slot

too-long - Renders content when the maxlength validation fails.

Slot

too-short - Renders content when the minlength validation fails.

Slot

custom-error - Renders content when setCustomValidity(message) is set.

Slot

invalid - Renders content when the component is in invalid state (validity.valid = false).

Fires

igcInput - Emitted when the control receives user input.

Fires

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

Csspart

container - The main wrapper that holds all main input elements of the textarea.

Csspart

input - The native input element of the igc-textarea.

Csspart

label - The native label element of the igc-textarea.

Csspart

prefix - The prefix wrapper of the igc-textarea.

Csspart

suffix - The suffix wrapper of the igc-textarea.

Csspart

helper-text - The helper text wrapper of the igc-textarea.

Hierarchy

FormRequiredInterface<this> & FormAssociatedElementInterface<this> & EventEmitterInterface<
IgcTextareaComponentEventMap,
this,
> & LitElement<this>
- IgcTextareaComponent

Constructors

constructor

new IgcTextareaComponent(): IgcTextareaComponent
Overrides FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).constructor
- Defined in src/components/textarea/textarea.ts:278
Returns IgcTextareaComponent

Properties

autocapitalize

autocapitalize: string

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

MDN documentation.

Attr

autocomplete

autocomplete: string

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.

Attr

disabled

disabled: boolean

The disabled state of the component.

Attr

Default

false

inputMode

inputMode: string

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

Attr

inputmode

invalid

invalid: boolean

Sets the control into invalid state (visual state only).

Attr

Default

false

label

label: string

The label for the control.

Attr

maxLength

maxLength: number

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.

Attr

maxlength

minLength

minLength: number

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

Attr

minlength

name

name: string

The name attribute of the control.

Attr

outlined

outlined: boolean = false

Whether the control will have outlined appearance.

Attr

placeholder

placeholder: string

The placeholder attribute of the control.

Attr

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

resize

resize: TextareaResize = 'vertical'

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

Attr

rows

rows: number = 3

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.

Attr

spellcheck

spellcheck: boolean = true

Controls whether the element may be checked for spelling errors.

Attr

validateOnly

validateOnly: boolean = false

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

Attr

validate-only

wrap

wrap: "off" | "hard" | "soft" = 'soft'

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

Attr

`Static`styles

styles: CSSResult[] = ...

`Static` `Readonly`tagName

tagName: "igc-textarea" = 'igc-textarea'

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

Accessors

defaultValue

get defaultValue(): unknown
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue
- Defined in src/components/common/mixins/forms/types.ts:157
Returns unknown
set defaultValue(value: unknown): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue
- Defined in src/components/common/mixins/forms/types.ts:156
The initial value of the component.

Parameters
- value: unknown
Returns void

form

get form(): HTMLFormElement | null
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).form
- Defined in src/components/common/mixins/forms/types.ts:45
Returns the HTMLFormElement associated with this element.

Returns HTMLFormElement | null

required

get required(): boolean
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).required
- Defined in src/components/common/mixins/forms/types.ts:175
Returns boolean
set required(value: boolean): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).required
- Defined in src/components/common/mixins/forms/types.ts:174
When set, makes the component a required field for validation.
Attr
Default
```
false
```
Parameters
- value: boolean
Returns void

validationMessage

get validationMessage(): string
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).validationMessage
- Defined in src/components/common/mixins/forms/types.ts:54
A string containing the validation message of this element.

Returns string

validity

get validity(): ValidityState
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).validity
- Defined in src/components/common/mixins/forms/types.ts:51
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

Returns ValidityState

value

get value(): string
- Defined in src/components/textarea/textarea.ts:237
Returns string
set value(value: string): void
- Defined in src/components/textarea/textarea.ts:233
The value of the component

Attr
Parameters
- value: string
Returns void

willValidate

get willValidate(): boolean
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).willValidate
- Defined in src/components/common/mixins/forms/types.ts:60
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

Returns boolean

Methods

addEventListener

addEventListener<
    K extends string
    | number
    | symbol,
    M extends IgcTextareaComponentEventMap & HTMLElementEventMap,
>(
    type: K,
    listener: (this: HTMLElement, ev: M[K]) => any,
    options?: boolean | AddEventListenerOptions,
): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).addEventListener
- Defined in src/components/common/mixins/event-emitter.ts:7
Type parameters
Type Parameters
- K extends string | number | symbol
- M extends IgcTextareaComponentEventMap & HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: M[K]) => any
- options: boolean | AddEventListenerOptions
Returns void
addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).addEventListener
- Defined in src/components/common/mixins/event-emitter.ts:12
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- options: boolean | AddEventListenerOptions
Returns void
addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).addEventListener
- Defined in node_modules/typescript/lib/lib.dom.d.ts:17886
Type parameters
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
- options: boolean | AddEventListenerOptions
Returns void

checkValidity

checkValidity(): boolean
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).checkValidity
- Defined in src/components/common/mixins/forms/types.ts:140
Checks for validity of the control and emits the invalid event if it invalid.

Returns boolean

emitEvent

emitEvent<K extends keyof IgcTextareaComponentEventMap, D extends string>(
type: K,
eventInitDict?: CustomEventInit<D>,
): boolean
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).emitEvent
- Defined in src/components/common/mixins/event-emitter.ts:30
Type parameters
Type Parameters
- K extends keyof IgcTextareaComponentEventMap
- D extends string
Parameters
- type: K
- eventInitDict: CustomEventInit<D>
Returns boolean

removeEventListener

removeEventListener<
    K extends string
    | number
    | symbol,
    M extends IgcTextareaComponentEventMap & HTMLElementEventMap,
>(
    type: K,
    listener: (this: HTMLElement, ev: M[K]) => any,
    options?: boolean | EventListenerOptions,
): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).removeEventListener
- Defined in src/components/common/mixins/event-emitter.ts:17
Type parameters
Type Parameters
- K extends string | number | symbol
- M extends IgcTextareaComponentEventMap & HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: M[K]) => any
- options: boolean | EventListenerOptions
Returns void
removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions,
): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).removeEventListener
- Defined in src/components/common/mixins/event-emitter.ts:25
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- options: boolean | EventListenerOptions
Returns void
removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).removeEventListener
- Defined in node_modules/typescript/lib/lib.dom.d.ts:17888
Type parameters
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
- options: boolean | EventListenerOptions
Returns void

reportValidity

reportValidity(): boolean
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).reportValidity
- Defined in src/components/common/mixins/forms/types.ts:143
Checks for validity of the control and shows the browser message if it invalid.

Returns boolean

scrollTo

scrollTo(options?: ScrollToOptions): void
Overrides FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).scrollTo
- Defined in src/components/textarea/textarea.ts:393
The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element.

MDN Reference

Parameters
- options: ScrollToOptions
Returns void
scrollTo(x: number, y: number): void
Overrides FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).scrollTo
- Defined in src/components/textarea/textarea.ts:395
Parameters
- x: number
- y: number
Returns void

select

select(): void
- Defined in src/components/textarea/textarea.ts:366
Selects all text within the control.

Returns void

setCustomValidity

setCustomValidity(message: string): void
Inherited from FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).setCustomValidity
- Defined in src/components/common/mixins/forms/types.ts:149
Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

Parameters
- message: string
Returns void

setRangeText

setRangeText(
    replacement: string,
    start: number,
    end: number,
    selectMode?: RangeTextSelectMode,
): void
- Defined in src/components/textarea/textarea.ts:382
Replaces the selected text in the control.

Parameters
- replacement: string
- start: number
- end: number
- selectMode: RangeTextSelectMode = 'preserve'
Returns void

setSelectionRange

setSelectionRange(
    start: number,
    end: number,
    direction?: SelectionRangeDirection,
): void
- Defined in src/components/textarea/textarea.ts:372
Sets the text selection range of the control

Parameters
- start: number
- end: number
- direction: SelectionRangeDirection = 'none'
Returns void

Class IgcTextareaComponent

Element

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Fires

Fires

Csspart

Csspart

Csspart

Csspart

Csspart

Csspart

Hierarchy

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns IgcTextareaComponent

Properties

autocapitalize

Attr

autocomplete

Attr

disabled

Attr

Default

inputMode

Attr

invalid

Attr

Default

label

Attr

maxLength

Attr

minLength

Attr

name

Attr

outlined

Attr

placeholder

Attr

readOnly

Attr

resize

Attr

rows

Attr

spellcheck

Attr

validateOnly

Attr

wrap

Attr

Staticstyles

Static ReadonlytagName

Accessors

defaultValue

Returns unknown

Parameters

value: unknown

Returns void

form

Returns HTMLFormElement | null

required

Returns boolean

Attr

Default

Parameters

`Static`styles

`Static` `Readonly`tagName