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
Key | Function |
---|---|
Tab | Moves focus to the next focusable element. If the currently focused element is the last element, focus will leave the component. |
Tab and Shift | Moves focus to the previous focusable element. If the currently focused element is the first element, focus will leave the component. |
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
columns | columns | Specifies the component's number of columns. | number | |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
form | form | The 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 | |
groupSeparator | group-separator | When true , number values are displayed with a group separator corresponding to the language and country format. | boolean | false |
label | label | Accessible name for the component. | string | |
limitText | limit-text | When true , prevents input beyond the maximum length, mimicking native
| boolean | false |
maxLength | max-length | When the component resides in a form, specifies the maximum number of characters allowed. | number | |
messageOverrides | Use this property to override individual strings used by the component. | {
invalid?: string;
tooLong?: string;
tooShort?: string;
} | ||
minLength | min-length | When the component resides in a form, specifies the minimum number of characters allowed. | number | |
name | name | Specifies the name of the component. | string | |
numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
placeholder | placeholder | Specifies the placeholder text for the component. | string | |
readOnly | read-only | When true , the component's value can be read, but cannot be modified. | boolean | false |
required | required | When true and the component resides in a form,
the component must have a value in order for the form to submit. | boolean | false |
resize | resize | Specifies if the component is resizable. | "both" | "horizontal" | "none" | "vertical" | "both" |
rows | rows | Specifies the component's number of rows. | number | |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | "idle" |
validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
validity | The 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;
} | ||
value | value | The component's value. | string | "" |
wrap | wrap | Specifies the wrapping mechanism for the text. | "hard" | "soft" | "soft" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding text. |
footer-start | A slot for adding content to the start of the component's footer. |
footer-end | A slot for adding content to the end of the component's footer. |
Styles
Name | Description |
---|---|
--calcite-text-area-background-color | Specifies the component's background color. |
--calcite-text-area-border-color | Specifies the component's text area border color. |
--calcite-text-area-character-limit-text-color | Specifies the color of the character limit text displayed in the footer of the component. |
--calcite-text-area-divider-color | Specifies the color of the divider between the text area and footer. |
--calcite-text-area-font-size | Specifies the font size of the text area and footer. |
--calcite-text-area-max-height | Specifies the component's text area maximum height. |
--calcite-text-area-min-height | Specifies the component's text area minimum height. |
--calcite-text-area-max-width | Specifies the component's text area maximum width. |
--calcite-text-area-min-width | Specifies the component's text area minimum width. |
--calcite-text-area-text-color | Specifies the component's text color. |
--calcite-text-area-footer-border-color | Specifies the footer's border color. |
Events
Name | Description | Behavior |
---|---|---|
calciteTextAreaChange | Fires each time a new value is typed and committed. | |
calciteTextAreaInput | Fires each time a new value is typed. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
selectText | Selects the text of the component's value . | selectText(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |