---
title: FormattedTextField
description: >-
  Use a formatted text field when you require additional functionality such as
  the text field input type or a custom validator.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/components/formattedtextfield
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/components/formattedtextfield.md
---

# Formatted​Text​Fieldcomponent

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

## FormattedTextField

* autoCapitalize

  AutoCapitalizationType

  Dictates when the text should be auto-capitalized.

* errorMessage

  string

  Sets an error message to present to the user.

* initialValue

  string

  Populates the `TextField` with an text initial value.

* inputType

  InputType

  The `InputType` of the `TextField`. This will select the appropriate keyboard.

* isValid

  boolean

  Set whether the current value in the `TextField` is valid.

* onChangeText

  (value: string) => void

  A callback that is executed every time the `TextField` value changes.

* placeholder

  string

  Sets a placeholder value for when the `TextField` is empty.

* title

  string

  The title of the `TextField`.

* customValidator

  (text: string) => boolean

  deprecated

  **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.

### AutoCapitalizationType

```ts
'none' | 'sentences' | 'words' | 'characters'
```

### InputType

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

```ts
'text' | 'number' | 'currency' | 'giftcard' | 'email'
```

## InputType

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

## AutoCapitalizationType

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

### Examples

* #### Render a FormattedTextField that validates email addresses

  ##### React

  ```tsx
  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

  ```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);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-10/formatted-text-field-default.png)