Formatted
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 inputTypeinputTypeInputType
The
of the. This will select the appropriate keyboard.- Anchor to autoCapitalizeautoCapitalizeAutoCapitalizationType
Dictates when the text should be auto-capitalized.
- Anchor to customValidatorcustomValidator(text: string) => boolean
Applies a custom validator that can dictate whether or not an entered value is valid.
- Anchor to titletitlestring
The title of the
.- Anchor to initialValueinitialValuestring
Populates the
with an text initial value.- Anchor to placeholderplaceholderstring
Sets a placeholder value for when the
is empty.- Anchor to isValidisValidboolean
Set whether the current value in the
is valid.- Anchor to errorMessageerrorMessagestring
Sets an error message to present to the user.
- Anchor to onChangeTextonChangeText(value: string) => void
A callback that is executed every time the
value changes.
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 (
<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 />,
);
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); }, );
Preview
