Skip to main content

EmailField
component

Use an email field to conveniently and accurately capture merchant email addresses.

Anchor to emailfieldEmailField

Anchor to label
label
string
required

The content to use as the field label.

Anchor to action
action

A button under the text field to provide extra functionality.

Anchor to disabled
disabled
boolean

Whether the field can be modified.

Anchor to error
error
string

Indicates an error to the user. The field is given specific stylistic treatment to communicate problems that have to be resolved immediately.

Anchor to helpText
helpText
string

The label under the text field which provides guidance or instructions that assist users.

Anchor to maxLength
maxLength
number

The maximum number of characters allowed in the input field.

Anchor to onBlur
onBlur
() => void

The callback when focus is removed.

Anchor to onChange
onChange
(value: string) => void

The callback when the user has finished editing a field.

Anchor to onFocus
onFocus
() => void

The callback when input is focused.

Anchor to onInput
onInput
(value: string) => void

Callback when the user makes any changes in the field. As noted in the documentation for onChange, you must not use this to update value — use the onChange callback for that purpose. Use the onInput prop when you need to do something as soon as the user makes a change, like clearing validation errors that apply to the field as soon as the user begins making the necessary adjustments.

Anchor to placeholder
placeholder
string

A short hint that describes the expected value of the field.

Anchor to required
required
boolean

Whether the field needs a value.

Anchor to value
value
string

The current value for the field. Defaults to now. You should update this value in response to the onChange callback.

Was this section helpful?

Email input

import React, {useState} from 'react';
import {
EmailField,
Screen,
ScrollView,
Navigator,
Text,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
const [email, setEmail] = useState('');
return (
<Navigator>
<Screen name="DateField" title="DateField Example">
<ScrollView>
<EmailField
label="Email"
placeholder="example@email.com"
helpText="Please enter a valid email"
value={email}
onChange={setEmail}
required={true}
action={{
label: 'Clear',
onPress: () => setEmail(''),
}}
/>
<Text>Entered Email: {email}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));