Skip to main content

Email field

The email field component captures email address input. Use it to collect email information in forms, customer profiles, or contact workflows.

Email field doesn't perform automatic email validation. Implement your own validation logic, and use the error property to display validation results.

Support
Targets (10)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the email field component.

Anchor to details
details
string

Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.

Anchor to disabled
disabled
boolean
Default: false

Disables the field, disallowing any interaction.

Anchor to error
error
string

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

Anchor to id
id
string

A unique identifier for the element.

Anchor to label
label
string

Content to use as the field label.

Anchor to maxLength
maxLength
number
Default: Infinity

Specifies the maximum number of characters allowed.

Anchor to placeholder
placeholder
string

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

Anchor to required
required
boolean
Default: false

Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.

Anchor to value
value
string

The current value for the field. If omitted, the field will be empty.

Anchor to EventsEvents

The email field component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur
blur
(event: <"s-email-field">) => void

Callback when the element loses focus.

Anchor to change
change
(event: <"s-email-field">) => void

Callback after editing completes (typically on blur).

Anchor to focus
focus
(event: <"s-email-field">) => void

Callback when the element receives focus.

Anchor to input
input
(event: <"s-email-field">) => void

Callback when the user makes any changes in the field.

Anchor to ExamplesExamples

Anchor to Capture email addresses with an email fieldCapture email addresses with an email field

Capture email address input using an email field component. This example shows a basic email field with a label for collecting email information.

Capture email addresses with an email field

Capture email address input using an email field component. This example shows a basic email field with a label for collecting email information.

Capture email addresses with an email field

<s-email-field
label="Email"
value="snowdevil@shopify.com"
required
/>

Anchor to Handle email input eventsHandle email input events

Subscribe to email input events to respond when merchants enter email addresses. This example demonstrates handling onChange, onInput, onFocus, and onBlur events for real-time email validation, duplicate checking, or autosave functionality.

Handle email input events

<s-email-field
label="Customer email"
placeholder="customer@example.com"
onInput={(event) => console.log('Input:', event.currentTarget.value)}
onChange={(event) => console.log('Change:', event.currentTarget.value)}
onFocus={(event) => console.log('Focus')}
onBlur={(event) => console.log('Blur')}
/>

Anchor to Best practicesBest practices

  • Write descriptive labels: Use specific labels like "Customer Email" or "Receipt Email Address" rather than generic "Email."
  • Provide context in details: Use details for additional context like "Required for digital receipts" or "We'll send order updates to this address."
  • Write actionable error messages: Provide clear validation messages like "Please enter a valid email address" that help users correct their input.
Was this page helpful?