Choose a version:

FormattedTextField
component

Use a formatted text field when you require additional functionality such as the text field input type or a custom validator.

Anchor to formattedtextfieldFormattedTextField

Anchor to autoCapitalize autoCapitalize: Dictates when the text should be auto-capitalized.
Anchor to errorMessage errorMessage string: Sets an error message to present to the user.
Anchor to initialValue initialValue string: Populates the TextField with an text initial value.
Anchor to inputType inputType: The InputType of the TextField. This will select the appropriate keyboard.
Anchor to isValid isValid boolean: Set whether the current value in the TextField is valid.
Anchor to onChangeText onChangeText (value: string) => void: A callback that is executed every time the TextField value changes.
Anchor to placeholder placeholder string: Sets a placeholder value for when the TextField is empty.
Anchor to title title string: The title of the TextField.
Anchor to customValidator customValidator (text: string) => boolean: Warning: This callback is currently broken and will not work as intended.

Custom validator function to determine the validity of an entered value.

Deprecated
This callback will be removed in version 2025-01. Please update your code to avoid using this feature.

FormattedTextFieldProps

autoCapitalize
Dictates when the text should be auto-capitalized.
```
AutoCapitalizationType
```
customValidator
**Warning:** This callback is currently broken and will not work as intended. Custom validator function to determine the validity of an entered value.
```
(text: string) => boolean
```
errorMessage
Sets an error message to present to the user.
```
string
```
initialValue
Populates the `TextField` with an text initial value.
```
string
```
inputType
The `InputType` of the `TextField`. This will select the appropriate keyboard.
```
InputType
```
isValid
Set whether the current value in the `TextField` is valid.
```
boolean
```
onChangeText
A callback that is executed every time the `TextField` value changes.
```
(value: string) => void
```
placeholder
Sets a placeholder value for when the `TextField` is empty.
```
string
```
title
The title of the `TextField`.
```
string
```

export interface FormattedTextFieldProps extends BaseTextFieldProps {
  /**
   * The `InputType` of the `TextField`. This will select the appropriate keyboard.
   */
  inputType?: InputType;
  /**
   * Dictates when the text should be auto-capitalized.
   */
  autoCapitalize?: AutoCapitalizationType;
  /**
   * **Warning:** This callback is currently broken and will not work as intended.
   *
   * Custom validator function to determine the validity of an entered value.
   *
   * @deprecated This callback will be removed in version 2025-01.
   * Please update your code to avoid using this feature.
   */
  customValidator?: (text: string) => boolean;
}

AutoCapitalizationType

'none' | 'sentences' | 'words' | 'characters'

InputType

Dictates what type of values can be used in a `TextField`.

'text' | 'number' | 'currency' | 'giftcard' | 'email'

Was this section helpful?

Anchor to inputtypeInputType

'text' | 'number' | 'currency' | 'giftcard' | 'email'

Was this section helpful?

Anchor to autocapitalizationtypeAutoCapitalizationType

'none' | 'sentences' | 'words' | 'characters'

Was this section helpful?

Render a FormattedTextField that validates email addresses

import React, {useState} from 'react';

import {

Navigator,

Screen,

Text,

ScrollView,

FormattedTextField,

reactExtension,

} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {

const [textFieldValue, setTextFieldValue] =

useState('');

return (

<Screen

name="TextArea"

title="Text Area Example"

<FormattedTextField

placeholder="Email address"

inputType="email"

onChangeText={setTextFieldValue}

<Text>{textFieldValue}</Text>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension(

'pos.home.modal.render',

() => <SmartGridModal />,

);

examples

Render a FormattedTextField that validates email addresses

React

import React, {useState} from 'react';
import {
  Navigator,
  Screen,
  Text,
  ScrollView,
  FormattedTextField,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const [textFieldValue, setTextFieldValue] =
    useState('');

  return (
    <Navigator>
      <Screen
        name="TextArea"
        title="Text Area Example"
      >
        <ScrollView>
          <FormattedTextField
            placeholder="Email address"
            inputType="email"
            onChangeText={setTextFieldValue}
          />
          <Text>{textFieldValue}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension(
  'pos.home.modal.render',
  () => <SmartGridModal />,
);

TS

import {
  extension,
  Screen,
  Navigator,
  ScrollView,
  Text,
  FormattedTextField,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root) => {
    const homeScreen = root.createComponent(
      Screen,
      {
        name: 'Home',
        title: 'Home',
      },
    );

    const text = root.createComponent(Text);

    const textField = root.createComponent(
      FormattedTextField,
      {
        placeholder: 'Email address',
        inputType: 'email',
        onChangeText: (newText) => {
          text.replaceChildren(newText);
        },
      },
    );

    const scrollView =
      root.createComponent(ScrollView);

    homeScreen.append(scrollView);
    scrollView.append(textField);
    scrollView.append(text);

    const navigator =
      root.createComponent(Navigator);
    navigator.append(homeScreen);
    root.append(navigator);
  },
);

FormattedTextFieldcomponent

Anchor to formattedtextfieldFormattedTextField

FormattedTextFieldProps

AutoCapitalizationType

InputType

Anchor to inputtypeInputType

InputType

Anchor to autocapitalizationtypeAutoCapitalizationType

AutoCapitalizationType

examples

Render a FormattedTextField that validates email addresses

React

TS

Preview

FormattedTextField
component