This article shows how to put the Plauti Verify Email Input (recordval-rv2-email-component) on a record page as an inline editor. The wrapper reads the current email value, lets the user edit and validate it, and saves the result back to the record only when validation passes.

If you have not yet, read Embedding Plauti Verify components on a record page first — it explains the wrapper pattern, the advice value used below, and the Lightning Web Security requirement for using these components in your own LWC.

The email wrapper is almost identical to the phone wrapper. The email component is the simplest of the three: it validates a single value and has no country or format settings.

What the Verify email component gives you

The email component accepts these properties:

Property	Type	Description
`api-name`	String	The field API name, echoed back on every event so you know the source.
`label`	String	The field label shown above the input.
`value`	String	The email address to start with.
`placeholder-text`	String	Placeholder shown when the field is empty.
`required`	Boolean	Marks the input as required.

And it dispatches these events:

Event	Detail
`change`	`value`, `apiName` — fired as the user types.
`validated`	`advice`, `value`, `statusCode`, `message`, `result` — fired once the Verify API responds. The `value` is the completed (corrected) address.
`validatestart`	`value`, `apiName` — fired when a validation call begins.
`validateerror`	`error`, `apiName` — fired when the validation call fails.

Validation runs automatically when the value changes, so you listen for validated rather than calling anything yourself.

The wrapper component

Create a Lightning Web Component, for example emailInlineValidate, with the three files below.

📘
The example markup is unstyled
This wrapper keeps the markup minimal to stay focused on the validation logic. It carries no SLDS layout or spacing — add your own utility classes so it matches the rest of your record page.

emailInlineValidate.html

<template>
    <template if:false={editing}>
        <span>{fieldLabel}</span>
        <lightning-formatted-email value={emailValue}></lightning-formatted-email>
        <lightning-button-icon icon-name="utility:edit" variant="bare" onclick={handleEdit}></lightning-button-icon>
    </template>

    <template if:true={editing}>
        <recordval-rv2-email-component
            label={fieldLabel}
            value={emailValue}
            api-name={fieldApiName}
            placeholder-text={placeholderText}
            required={required}
            onvalidated={handleValidated}
            onchange={handleChange}>
        </recordval-rv2-email-component>
        <lightning-button label="Save" onclick={handleSave}></lightning-button>
        <lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
    </template>
</template>

emailInlineValidate.js

import {LightningElement, api, wire} from 'lwc';
import {getRecord, getFieldValue, updateRecord} from 'lightning/uiRecordApi';

export default class EmailInlineValidate extends LightningElement {
    @api recordId;
    @api objectApiName;
    @api fieldApiName = 'Email';
    @api fieldLabel = 'Email';
    @api placeholderText;
    @api required;

    editing = false;
    pendingValue = '';
    lastAdvice = '';

    @wire(getRecord, {recordId: '$recordId', fields: '$wireFields'})
    record;

    get wireFields() {
        return this.objectApiName && this.fieldApiName ? [`${this.objectApiName}.${this.fieldApiName}`] : [];
    }

    get emailValue() {
        return this.record?.data ? getFieldValue(this.record.data, `${this.objectApiName}.${this.fieldApiName}`) : '';
    }

    handleEdit() {
        this.editing = true;
    }

    handleCancel() {
        this.editing = false;
    }

    handleChange(event) {
        this.pendingValue = event.detail.value;
    }

    handleValidated(event) {
        this.lastAdvice = event.detail.advice;
        this.pendingValue = event.detail.value;
    }

    handleSave() {
        if (this.lastAdvice !== 'GREEN') return;
        const fields = {Id: this.recordId};
        fields[this.fieldApiName] = this.pendingValue;
        updateRecord({fields}).then(() => {
            this.editing = false;
        });
    }
}

Email validation can return AMBER when an address is usable but imperfect. The example saves only on GREEN. If your policy accepts deliverable-but-imperfect addresses, change the guard in handleSave to also allow AMBER:

handleSave() {
    if (this.lastAdvice === 'RED') return;
    const fields = {Id: this.recordId};
    fields[this.fieldApiName] = this.pendingValue;
    updateRecord({fields}).then(() => {
        this.editing = false;
    });
}

emailInlineValidate.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Email Inline Validate</masterLabel>
    <description>Inline edit wrapper for Plauti Verify email validation</description>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="fieldApiName" type="String" label="Email Field API Name" default="Email" />
            <property name="fieldLabel" type="String" label="Field Label" default="Email" />
            <property name="placeholderText" type="String" label="Placeholder Text" />
            <property name="required" type="Boolean" label="Required" default="false" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Add it to a record page

Deploy the component to your org.
Open the record page in the Lightning App Builder.
Drag your Email Inline Validate component onto the page.
Set the Email Field API Name to the field you want to validate (for example Email on Contact or Lead).
Save and activate.

recordId and objectApiName are provided automatically by the record page.