Text Area

Text Area is a multiple line text input control.

Overview

Text Area allows users to enter a sizeable amount of free form text.

Usage

  • Collect user inputs like comments or reviews in forms

Sample

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last element, focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first element, focus will leave the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
columnscolumnsSpecifies the component's number of columns.number
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
labellabelAccessible name for the component.string
limitTextlimit-textWhen true, prevents input beyond the maximum length, mimicking native booleanfalse
maxLengthmax-lengthWhen the component resides in a form, specifies the maximum number of characters allowed.number
messageOverridesUse this property to override individual strings used by the component.{ invalid?: string; tooLong?: string; tooShort?: string; }
minLengthmin-lengthWhen the component resides in a form, specifies the minimum number of characters allowed.number
namenameSpecifies the name of the component.string
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
placeholderplaceholderSpecifies the placeholder text for the component.string
readOnlyread-onlyWhen true, the component's value can be read, but cannot be modified.booleanfalse
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
resizeresizeSpecifies if the component is resizable."both" | "horizontal" | "none" | "vertical""both"
rowsrowsSpecifies the component's number of rows.number
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's value.string""
wrapwrapSpecifies the wrapping mechanism for the text."hard" | "soft""soft"

Slots

NameDescription
default (unnamed)A slot for adding text.

Styles

NameDescription
--calcite-text-area-background-colorSpecifies the component's background color.
--calcite-text-area-border-colorSpecifies the component's text area border color.
--calcite-text-area-character-limit-text-colorSpecifies the color of the character limit text displayed in the footer of the component.
--calcite-text-area-divider-colorSpecifies the color of the divider between the text area and footer.
--calcite-text-area-font-sizeSpecifies the font size of the text area and footer.
--calcite-text-area-max-heightSpecifies the component's text area maximum height.
--calcite-text-area-min-heightSpecifies the component's text area minimum height.
--calcite-text-area-max-widthSpecifies the component's text area maximum width.
--calcite-text-area-min-widthSpecifies the component's text area minimum width.
--calcite-text-area-text-colorSpecifies the component's text color.

Events

NameDescriptionBehavior
calciteTextAreaChangeFires each time a new value is typed and committed.bubblescomposedcancelable
calciteTextAreaInputFires each time a new value is typed.bubblescomposedcancelable

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
selectTextSelects the text of the component's value.selectText(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close