Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Class IgrTextarea

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.

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).

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.

Callable

  • IgrTextarea(): ReactNode

    Returns ReactNode

Events

Methods

Properties

Events

onChange

onChange: (args: CustomEvent<string>) => void

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

Type declaration

onInput

onInput: (args: CustomEvent<string>) => void

Emitted when the control receives user input.

Type declaration

Methods

scrollTo

  • scrollTo(options?: ScrollToOptions): void

    MDN Reference

    Parameters

    • options: ScrollToOptions

    Returns void

  • scrollTo(x: number, y: number): void

    Parameters

    • x: number
    • y: number

    Returns void

select

  • select(): void

    Selects all text within the control.

    Returns void

setRangeText

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

    Replaces the selected text in the control.

    Parameters

    Returns void

setSelectionRange

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

    Sets the text selection range of the control

    Parameters

    Returns void

Properties

autocapitalize

autocapitalize: string

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

MDN documentation.

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.

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

label

label: string

The label for the control.

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.

minLength

minLength: number

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

outlined

outlined: boolean

Whether the control will have outlined appearance.

placeholder

placeholder: string

The placeholder attribute of the control.

readOnly

readOnly: boolean

Makes the control a readonly field.

resize

resize: TextareaResize

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

rows

rows: number

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 2.

spellcheck

spellcheck: boolean

Controls whether the element may be checked for spelling errors.

validateOnly

validateOnly: boolean

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

value

value: string

The value of the component

wrap

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

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