Disable autocomplete on FormItem

I have this simple form:

    <FormItems>

        <FormGroup CssClass="no-header-group">

            <FormItem Field="@nameof(Input.FirstName)" />

            <FormItem Field="@nameof(Input.LastName)" />

        </FormGroup>

    </FormItems>

This generates HTML like that:

<input id="FirstName" autocomplete="on" type="text" class="e-control e-textbox e-lib e-input" name="FirstName" role="textbox" tabindex="0" aria-disabled="false" maxlength="100" aria-label="textbox" _bl_24116bb8-9e53-48b2-9039-b87b7915ecec="">

I'd like to disable autocomplete. How do I do that?

Thank you


1 Reply

PK Priyanka Karthikeyan Syncfusion Team December 24, 2024 05:16 AM UTC

Hi Gene,

 

Thank you for reaching out to us.

 

To disable the autocomplete functionality for a form item in the SfDataForm, you can set the AutoComplete property to "off". This ensures that browser autofill suggestions are not displayed when filling out the form.

Please find the code snippet and sample below for your reference:

 

 

<SfDataForm ID="MyForm"
            Width="50%"
            Model="@EventRegistrationModel"
            AutoComplete="off">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem  Field="@nameof(EventRegistration.Name)"  Placeholder="e.g. Andrew Fuller"></FormItem>
        <FormItem  Field="@nameof(EventRegistration.Email)"  Placeholder="e.g. [email protected]"></FormItem>
    </FormItems>
</SfDataForm>

 

Sample: https://blazorplayground.syncfusion.com/LDhTsrBpMvmHUKbC

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_AutoComplete

 

Regards,

Priyanka K


Loader.
Up arrow icon