---
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-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/formattedtextfield
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/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.

* customValidator

  (text: string) => boolean

  Applies a custom validator that can dictate whether or not an entered value is valid.

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

### 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-07/formatted-text-field-default.png)