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 inputType inputType: The InputType of the TextField. This will select the appropriate keyboard.
Anchor to autoCapitalize autoCapitalize: Dictates when the text should be auto-capitalized.
Anchor to customValidator customValidator (text: string) => boolean: Applies a custom validator that can dictate whether or not an entered value is valid.
Anchor to title title string: The title of the TextField.
Anchor to initialValue initialValue string: Populates the TextField with an text initial value.
Anchor to placeholder placeholder string: Sets a placeholder value for when the TextField is empty.
Anchor to isValid isValid boolean: Set whether the current value in the TextField is valid.
Anchor to errorMessage errorMessage string: Sets an error message to present to the user.
Anchor to onChangeText onChangeText (value: string) => void: A callback that is executed every time the TextField value changes.

FormattedTextFieldProps

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

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;
  /**
   * Applies a custom validator that can dictate whether or not an entered value is valid.
   */
  customValidator?: (text: string) => boolean;
}

InputType

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

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

AutoCapitalizationType

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

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

InputType

AutoCapitalizationType

Anchor to inputtypeInputType

InputType

Anchor to autocapitalizationtypeAutoCapitalizationType

AutoCapitalizationType

examples

Render a FormattedTextField that validates email addresses

React

TS

Preview

FormattedTextField
component