autoComplete

The autoComplete prop within the ReactMultiEmail component corresponds directly to the autoComplete attribute of the HTML input element, allowing the browser to predict and remember the email addresses previously entered by the user. This leads to quicker selection of previously entered values in the same email input field.

• on: Turns on the auto-complete feature, suggesting previously entered values by the user.
• off: Turns off the auto-complete feature.

About autoComplete

• Property: autoComplete
• Type: string | undefined
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

Result

caution

In HTML, the content for auto-fill(autoComplete) varies based on the type attribute. However, with react-multi-email, you can achieve this using the id attribute. For instance, by setting id="email", the component will auto-fill email addresses.

tip

For more information on HTML's autocomplete functionality and its types, please refer to the provided link:
HTML autocomplete attribute

Code

Full code

AutoComplete.tsx

import * as React from 'react';
import { ReactMultiEmail } from 'react-multi-email';
import 'react-multi-email/dist/style.css';

export default function multiEmail() {
  const [emails, setEmails] = React.useState<string[]>([]);

  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // autoComplete prop
        autoComplete='on'
        id="email"
        placeholder="Input your Email Address"
        emails={emails}
        onChange={(_emails: string[]) => {
          setEmails(_emails);
        }}
        getLabel={(
          email: string,
          index: number,
          removeEmail: (index: number) => void
        ) => {
          return (
            <div data-tag key={index}>
              {email}
              <span data-tag-handle onClick={() => removeEmail(index)}>
                ×
              </span>
            </div>
          );
        }}
      />
      <h4>react-multi-email value</h4>
      <p>{emails.join(", ") || "empty"}</p>
    </div>
  );
}

const styles = {
  fontFamily: "sans-serif",
  width: "500px",
  border: "1px solid rgb(238, 238, 238)",
  background: "rgb(243, 243, 243)",
  padding: "25px",
  margin: "20px",
  color: "black",
};

Code snippet

AutoComplete.tsx

<ReactMultiEmail
  autoComplete='on'
  // id="email"
  // other props...
/>