TextField

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.

TextField is a versatile input field that merchants can type into.

It supports several input formats including numbers.

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();

});

import React from 'react';

import {extend, render, TextField} from '@shopify/admin-ui-extensions-react';

function App() {

return (

<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

onClearButtonPress={() => console.log('Clear that silly statement')}

);

}

extend(

'Playground',

render(() => <App />),

);

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();
});

import React from 'react';
import {extend, render, TextField} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <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
      onClearButtonPress={() => console.log('Clear that silly statement')}
    />
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

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<<wbr />void<wbr />>`	Callback when input is focused.
onBlur?	`() => void \| Promise<<wbr />void<wbr />>`	Callback when focus is removed.
clearButton?	`boolean`	Show a 'clear text' button in the input.
onClearButtonPress?	`() => void`	Callback when clear button is pressed.

Anchor to GuidelinesGuidelines

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.

Was this page helpful?