Choose a version:

EmailField

Use s-email-field to capture email addresses from users. 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 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

Anchor to accessory accessory HTMLElement

Was this section helpful?

Anchor to eventsEvents

Anchor to blur blur (event: <"s-divider">) => void
Anchor to change change (event: <"s-divider">) => void
Anchor to focus focus (event: <"s-divider">) => void
Anchor to input input (event: <"s-divider">) => void

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"

placeholder="Enter your email"

required

value="example@shopify.com"></s-email-field>

<s-email-field

label="Email"

placeholder="Enter your email"

required

error="Enter a valid email address"

value="example.com"></s-email-field>

Examples

Code

Default

<s-email-field 
  label="Email" 
  placeholder="Enter your email"
  required
  value="example@shopify.com"></s-email-field>

<s-email-field 
  label="Email" 
  placeholder="Enter your email"
  required
  error="Enter a valid email address"
  value="example.com"></s-email-field>

EmailField

Anchor to propertiesProperties

Anchor to slotsSlots

Anchor to eventsEvents

CallbackEvent

Examples

Code

Default

Preview