Choose a version:

EmailField

Captures email address input from merchants. Provides built-in email validation and appropriate keyboard layout.

Anchor to propertiesProperties

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.

Was this section helpful?

Anchor to slotsSlots

Learn more about using slots

Anchor to accessory accessory HTMLElement: Additional content to be displayed in the field. Commonly used to display clickable text.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering 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.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-email-field

label="Email"

value="snowdevil@shopify.com"

required

Preview

Anchor to examplesExamples

EmailField usage patterns

Anchor to example-event-handlingEvent handling

Handle email input events

Anchor to example-accessory-slotAccessory slot

Add action buttons using the accessory slot. Only s-button and s-clickable are supported

Was this section helpful?

Event handling

<s-email-field

label="Customer email"

placeholder="customer@example.com"

onInput={(event) => console.log('Input:', event.target.value)}

onChange={(event) => console.log('Change:', event.target.value)}

onFocus={(event) => console.log('Focus')}

onBlur={(event) => console.log('Blur')}

Examples

Event handling

Description

Handle email input events

Default

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

Accessory slot

Description

Add action buttons using the accessory slot. Only s-button and s-clickable are supported

Default

<s-email-field
  label="Newsletter signup"
  placeholder="Enter email address"
  value="customer@example.com"
>
  <s-button slot="accessory" onClick={() => console.log('Subscribe')}>
    Subscribe
  </s-button>
</s-email-field>;