# FormattedTextField

This component is deprecated. Please use the [`TextField`](https://shopify.dev/docs/api/pos-ui-extensions/components/textfield) component instead. Use a formatted text field when you require additional functionality such as the text field input type or a custom validator.

```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="FormattedTextField"
        title="FormattedTextField 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: 'FormattedTextField',
        title: 'FormattedTextField Example',
      },
    );

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

```

## FormattedTextField

### FormattedTextFieldProps

### autoCapitalize

value: `AutoCapitalizationType`

Dictates when the text should be auto-capitalized.

### errorMessage

value: `string`

Sets an error message to present to the user.

### initialValue

value: `string`

Populates the `TextField` with an text initial value.

### inputType

value: `InputType`

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

### isValid

value: `boolean`

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

### onChangeText

value: `(value: string) => void`

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

### placeholder

value: `string`

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

### title

value: `string`

The title of the `TextField`.

## InputType

## AutoCapitalizationType