# TextArea component for Stripe Apps Use TextArea to create an input field for multiple lines of text. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/textarea?app-sdk-version=8. To add the `TextArea` component to your app: ```js import {TextArea} from '@stripe/ui-extension-sdk/ui'; ``` ### TextArea props | Property | Type | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autoComplete` | (Optional) `string | undefined` Specifies one of the possible autocomplete behaviors. | | `autoFocus` | (Optional) `boolean | undefined` If `true`, React will focus the element on mount. | | `cols` | (Optional) `number | undefined` | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/textarea.md#css). | | `defaultValue` | (Optional) `string | undefined` Specifies the initial value that a user can change. | | `description` | (Optional) `string | undefined` Descriptive text that will be rendered adjacent to the control’s label. | | `disabled` | (Optional) `boolean | undefined` Sets whether or not the element should be disabled. Prevents selection. | | `error` | (Optional) `string | undefined` Error text that will be rendered below the control. | | `form` | (Optional) `string | undefined` Specifies the `id` of the `
` this input belongs to. If omitted, it’s the closest parent form. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. | | `invalid` | (Optional) `boolean | undefined` Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. | | `label` | (Optional) `React.ReactNode` Text that describes the control. Will be both visible and clickable. | | `maxLength` | (Optional) `number | undefined` Specifies the maximum length of text. | | `minLength` | (Optional) `number | undefined` Specifies the minimum length of text. | | `name` | (Optional) `string | undefined` Specifies the name for this input that’s submitted with the form. | | `onChange` | (Optional) `((event: React.ChangeEvent) => void) | undefined` Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. | | `onKeyDown` | (Optional) `((event: React.KeyboardEvent) => void) | undefined` Fires when a key is pressed. | | `onKeyUp` | (Optional) `((event: React.KeyboardEvent) => void) | undefined` Fires when a key is released. | | `placeholder` | (Optional) `string | undefined` Displayed in a dimmed color when the input value is empty. | | `readOnly` | (Optional) `boolean | undefined` If `true`, the input is not editable by the user. | | `required` | (Optional) `boolean | undefined` If `true`, the value must be provided for the form to submit. | | `resizeable` | (Optional) `boolean | undefined` | | `rows` | (Optional) `number | undefined` | | `size` | (Optional) `("small" | "medium" | "large") | undefined` The size of the component. | | `spellCheck` | (Optional) `boolean | "true" | "false" | undefined` If explicitly set to `true` or `false`, enables or disables spellchecking. | | `tabIndex` | (Optional) `number | undefined` Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. | | `value` | (Optional) `string | undefined` Controls the input’s text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value. | | `wrap` | (Optional) `string | undefined` | | `onKeyPress` | (Optional)(Deprecated) `((event: React.KeyboardEvent) => void) | undefined` | ### CSS | Property | Type | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `width` | (Optional) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style.md#sizing) for details. | ## Invalid You can mark a `TextArea` as invalid by setting the `invalid` prop on the element. This is purely visual. It defaults to `false`. ## Resizeable By default, `TextArea` is vertically resizable. Users who need more space typically prefer this. If you need to prevent the element from resizing, set `resizeable` to `false`. ## Size Changing the `size` allows you to choose variants with slightly more or slightly less room than the default. In general you don’t want to mix and match different sizes within the same form. The default is `medium`. ## Disable and read only You can mark a field as `disabled`, which prevents any interaction and changes the styling. Disabled means that no data from that form element is submitted when the form is submitted. You can also make a field as `readOnly`. Read-only means any data from within the element is submitted, but the user can’t change it. ## Rows A `TextArea` uses rows to control its height rather than using a traditional height in pixels, just like a regular `