> Deprecated: > Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to [purchase options extensions](/docs/apps/build/purchase-options/purchase-options-extensions). TextField is a versatile input field that merchants can type into. It supports several input formats including numbers. ```ts?title: "JavaScript" import {extend, TextField} from '@shopify/admin-ui-extensions'; extend('Playground', (root) => { const textfield = root.createComponent(TextField, { label: 'Super text field', type: 'text', value: 'I can fly!', placeholder: 'Type a thing', multiline: 3, prefix: 'I typed:', suffix: 'into this text field', error: 'I hate to break this to you, but you cannot fly', onChange: (value) => console.log(value, ' was typed'), onInput: (value) => console.log(value, ' was typed'), onFocus: () => console.log('Welcome to the super field!'), onBlur: () => console.log('Left to do something else'), clearButton: true, onClearButtonPress: () => console.log('Clear that silly statement'), }); root.appendChild(textfield); root.mount(); }); ``` ```tsx?title: "React" import React from 'react'; import {extend, render, TextField} from '@shopify/admin-ui-extensions-react'; function App() { return ( console.log(value, ' was typed')} onInput={(value) => console.log(value, ' was typed')} onFocus={() => console.log('Welcome to the super field!')} onBlur={() => console.log('Left to do something else')} clearButton onClearButtonPress={() => console.log('Clear that silly statement')} /> ); } extend( 'Playground', render(() => ), ); ``` ## Props optional = ? | Name | Type | Description | | --- | --- | --- | | label | string | Human-readable label for the input. | | type? | "text" | "search" | "number" | Input type | | value? | string | Input value. | | placeholder? | string | Hint text to display when no text is input | | multiline? | number | boolean | Allow for multiple lines of input. | | prefix? | string | Text to display before the input value. | | suffix? | string | Text to display after the input value. | | error? | string | Error text to display beneath the label. | | onInput? | (value: string) => void | Callback when value is changed. | | onChange? | (value: string) => void | Callback when user leaves the input. | | onFocus? | () => void | Promise<void> | Callback when input is focused. | | onBlur? | () => void | Promise<void> | Callback when focus is removed. | | clearButton? | boolean | Show a 'clear text' button in the input. | | onClearButtonPress? | () => void | Callback when clear button is pressed. | ## Guidelines - `TextField` will expand to the width of its container | ✅ Do | 🛑 Don't | | --------------------------------------------------------------------------- | -------------------------------- | | 📱 Stack `TextField` components vertically | 📱 Stack `TextField` components horizontally | | Use TextField to capture merchant text input | | For more guidelines, refer to Polaris' [Text Field best practices](https://polaris.shopify.com/components/selection-and-input/text-field#best-practices).