---
title: EmailField
description: Captures email address input from merchants. Provides built-in email validation and appropriate keyboard layout.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/emailfield
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/emailfield.md
---

# Email​Field

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

## Properties

* 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.

* disabled

  boolean

  Default: false

  Disables the field, disallowing any interaction.

* 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.

* id

  string

  A unique identifier for the element.

* label

  string

  Content to use as the field label.

* maxLength

  number

  Default: Infinity

  Specifies the maximum number of characters allowed.

* placeholder

  string

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

* 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.

* value

  string

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

## Slots

Learn more about using [slots](https://shopify.dev/docs/api/pos-ui-extensions/using-polaris-components#slots)

* accessory

  HTMLElement

  Additional content to be displayed in the field. Commonly used to display clickable text.

## Events

Learn more about registering [events](https://shopify.dev/docs/api/pos-ui-extensions/using-polaris-components#events)

* blur

  (event: CallbackEvent<"s-email-field">) => void

  Callback when the element loses focus.

* change

  (event: CallbackEvent<"s-email-field">) => void

  Callback after editing completes (typically on blur).

* focus

  (event: CallbackEvent<"s-email-field">) => void

  Callback when the element receives focus.

* input

  (event: CallbackEvent<"s-email-field">) => void

  Callback when the user makes any changes in the field.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

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

### Examples

* #### Code

  ##### Default

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/email-field-default.png)

## Examples

EmailField usage patterns

### Examples

* #### Event handling

  ##### Description

  Handle email input events

  ##### Default

  ```jsx
  <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')}
  />
  ```

* #### Accessory slot

  ##### Description

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

  ##### Default

  ```jsx
  <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>;
  ```