--- title: Text area description: >- The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content. The component supports configurable height, character limits, and validation. For single-line text input, use [text field](/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/text-field). api_version: 2025-10 api_name: pos-ui-extensions source_url: html: >- https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/text-area md: >- https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/text-area.md --- # Text area The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content. The component supports configurable height, character limits, and validation. For single-line text input, use [text field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/text-field). ### Support Targets (9) ### Supported targets * [pos.​cart.​line-item-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-) * [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-) * [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-) * [pos.​exchange.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-) * [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-) * [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-) * [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-) * [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-) * [pos.​return.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-) #### Use cases * **Descriptions:** Collect product descriptions or notes in inventory management workflows. * **Customer notes:** Capture comments, special instructions, or notes in order processing. * **Feedback:** Enable feedback collection or issue reporting with detailed explanations. * **Multi-line entry:** Support multi-line text for addresses, delivery instructions, or requirements. ## Examples ### Capture multi-line text with a text area Capture multi-line text input using a text area component. This example shows a basic text area with a label for extended content. ## Capture multi-line text with a text area ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-area-default-CdsAND00.png) ### Add accessory buttons Add action buttons to the text area using the accessory slot for quick actions like clearing text or formatting content. This example shows how to use [s-button](https://shopify.dev/docs/api/pos-ui-extensions/%7BAPI_VERSION%7D/polaris-web-components/actions/button) and [s-clickable](https://shopify.dev/docs/api/pos-ui-extensions/%7BAPI_VERSION%7D/polaris-web-components/actions/clickable) components in the accessory slot, providing inline functionality within the multi-line input context. ### Configure rows and character limits Configure the number of visible rows and character limits to control text area size and input length. This example shows how to use the `rows` property to set initial height and `maxlength` to limit content, ensuring appropriate sizing for different types of text input. ### Handle text input events Subscribe to text area events to respond when merchants enter or modify text. This example demonstrates handling `onChange`, `onInput`, `onFocus`, and `onBlur` events for autosave functionality, character counting, or real-time validation of longer text content. ### Examples * #### Capture multi-line text with a text area ##### Description Capture multi-line text input using a text area component. This example shows a basic text area with a label for extended content. ##### Default ```html ``` * #### Add accessory buttons ##### Description Add action buttons to the text area using the accessory slot for quick actions like clearing text or formatting content. This example shows how to use \[s-button]\(/docs/api/pos-ui-extensions/{API\_VERSION}/polaris-web-components/actions/button) and \[s-clickable]\(/docs/api/pos-ui-extensions/{API\_VERSION}/polaris-web-components/actions/clickable) components in the accessory slot, providing inline functionality within the multi-line input context. ##### Default ```jsx console.log('Clear')}> Clear ; ``` * #### Configure rows and character limits ##### Description Configure the number of visible rows and character limits to control text area size and input length. This example shows how to use the \`rows\` property to set initial height and \`maxlength\` to limit content, ensuring appropriate sizing for different types of text input. ##### Default ```jsx console.log('Characters:', event.currentTarget.value.length)} /> ``` * #### Handle text input events ##### Description Subscribe to text area events to respond when merchants enter or modify text. This example demonstrates handling \`onChange\`, \`onInput\`, \`onFocus\`, and \`onBlur\` events for autosave functionality, character counting, or real-time validation of longer text content. ##### Default ```jsx console.log('Input:', event.currentTarget.value)} onChange={(event) => console.log('Change:', event.currentTarget.value)} onFocus={(event) => console.log('Focused')} onBlur={(event) => console.log('Blurred')} /> ``` ## Properties Configure the following properties on the text area component. * **details** **string** The additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users. * **disabled** **boolean** **Default: false** Whether the field is disabled, preventing user interaction. Use when the field is temporarily unavailable due to application state, permissions, or dependencies. * **error** **string** An error message to indicate a problem to the user. The field will be given specific stylistic treatment to communicate issues that must be resolved immediately. * **id** **string** A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features. * **label** **string** The content to use as the field label that describes the text information being requested. * **maxLength** **number** **Default: Infinity** The maximum number of characters allowed in the text field. * **placeholder** **string** A short hint that provides guidance about the expected value of the field. * **required** **boolean** **Default: false** Whether the field needs a value. This requirement adds semantic value to the field but doesn't cause an error to appear automatically. Use the `error` property to present validation errors. * **rows** **number** **Default: 2** The number of visible text lines that determines the initial height of the text area. * **value** **string** The current text content entered in the field. An empty string means no text is entered. ## Slots The text area component supports slots for additional content placement within the field. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots). * **accessory** **HTMLElement** The additional content to be displayed in the field. Commonly used to display clickable text or action elements. Only button and clickable components with text content only are supported in this slot. Use the `slot="accessory"` attribute to place elements in this area. ## Events The text area component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events). * **blur** **(event: CallbackEvent<"s-text-area">) => void** Called when the element loses focus. * **change** **(event: CallbackEvent<"s-text-area">) => void** Called after editing completes, typically on blur. * **focus** **(event: CallbackEvent<"s-text-area">) => void** Called when the element receives focus. * **input** **(event: CallbackEvent<"s-text-area">) => void** Called when the user makes any changes in the field. ### CallbackEvent Represents the event object passed to callback functions when interactive events occur. Contains metadata about the event, including the target element, event phase, and propagation behavior. * bubbles Whether the event bubbles up through the DOM tree. ```ts boolean ``` * cancelable Whether the event can be canceled. ```ts boolean ``` * composed Whether the event will trigger listeners outside of a shadow root. ```ts boolean ``` * currentTarget The element that the event listener is attached to. ```ts HTMLElementTagNameMap[T] ``` * detail Additional data associated with the event. ```ts any ``` * eventPhase The current phase of the event flow. ```ts number ``` * target The element that triggered the event. ```ts HTMLElementTagNameMap[T] | null ``` ## Best practices * **Set appropriate row count:** Use 2-3 `rows` for brief notes, 4-6 for descriptions, and more for extensive content. * **Show character limit feedback:** When approaching `maxLength`, display remaining characters in the `details` text. * **Write descriptive labels:** Use specific labels like "Product Description" or "Special Instructions" rather than generic terms. ## Limitations The `accessory` slot supports only [button](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button) and [clickable](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/clickable) components. Other component types can't be used for field accessories.