# TextField component for Stripe Apps Use TextField to create a text input field. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/textfield?app-sdk-version=8. To add the `TextField` component to your app: ```js import {TextField} from '@stripe/ui-extension-sdk/ui'; ``` ### TextField 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. | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/textfield.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. | | `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`. | | `type` | (Optional) `("number" | "text" | "search" | "tel" | "url" | "email" | "password") | undefined` Choose between the text-alike types on an input. | | `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. | | `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 set `invalid` on a TextField element to render the component with a red outline as a visual indicator that the value provided isn’t acceptable. Omitting this property defaults to `false`. ## Type You can set the `type` property for the TextField to render it differently depending on the type of text value expected. This is similar to the type attribute on an ``, but is restricted to types that allow text. Omitting this property defaults to `text`. ## 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`. ## Disabled 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 will be submitted, but the user can’t change it. ## State management Use the `TextField` component as an [uncontrolled input](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions): ## Width Set the width of a `TextField` component using [the available values](https://docs.stripe.com/stripe-apps/style.md#sizing) with the `css` prop: # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/textfield?app-sdk-version=9. To add the `TextField` component to your app: ```js import {TextField} from '@stripe/ui-extension-sdk/ui'; ``` ### TextField 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. | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/textfield.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. | | `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`. | | `type` | (Optional) `("number" | "text" | "search" | "tel" | "url" | "email" | "password") | undefined` Choose between the text-alike types on an input. | | `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. | ### 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 set `invalid` on a TextField element to render the component with a red outline as a visual indicator that the value provided isn’t acceptable. Omitting this property defaults to `false`. ## Type You can set the `type` property for the TextField to render it differently depending on the type of text value expected. This is similar to the type attribute on an ``, but is restricted to types that allow text. Omitting this property defaults to `text`. ## 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`. ## Disabled 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 will be submitted, but the user can’t change it. ## State management Use the `TextField` component as an [uncontrolled input](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions): ## Width Set the width of a `TextField` component using [the available values](https://docs.stripe.com/stripe-apps/style.md#sizing) with the `css` prop: ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)