diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Autocomplete/FluentAutocomplete.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Autocomplete/FluentAutocomplete.md index cef71fefbe..3fddded525 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Autocomplete/FluentAutocomplete.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Autocomplete/FluentAutocomplete.md @@ -15,6 +15,8 @@ You can control this behavior by providing the `OptionSelectedComparer` paramete > **Note:** Accessibility requirements are not yet implemented for this component. +> **Note:** For more information about placeholders and autofill, see this important information + ## Keyboard interaction | Key | Behavior | diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/FluentCombobox.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/FluentCombobox.md index cbbba8aca8..6d5b765e70 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/FluentCombobox.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/FluentCombobox.md @@ -11,6 +11,8 @@ Entering text will filter options or allow someone to submit a free form answer. Comboboxes work well in situations where the list of options is very long. If the list is not very long or you can't accept free form answers, try a **FluentSelect**. +> **Note:** For more information about placeholders and autofill, see this important information + ## Default When no item is selected, a **Placeholder** can be used to describe what should be done. diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md index 0942869daf..3b2bdf49ee 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/FluentTextInput.md @@ -122,9 +122,31 @@ You cannot modify them dynamically. You can set the `TextInputType` property to define the type of the text input. This relies on browser supplied support for the different types and can therefore vary between browsers. - {{ TextInputTypes }} +## Placeholders and autofill + +The `Placeholder` parameter is used to set the placeholder text for the input field. This is a short hint that describes the expected value of the input field. +It is displayed when the input field is empty and not focused. + +The placeholder value affects the autofill suggestion feature in Microsoft Edge and Google Chrome. +Even if you set the `AutoComplete` parameter to `off`, the browser may still display autofill suggestions based on the placeholder value. + +There are certain placeholder values which you should avoid to prevent the browser from showing autofill suggestions. + +| Value (Placeholder/Name) | Description | +|--------------------------|--------------------------------------| +| `name`, `full name`, `first name`, `last name`| Personal name fields | +| `email`, `e-mail`, `mail`| Email address fields | +| `address`, `street`, `city`, `zip`, `postal`| Address and postal code fields | +| `phone`, `tel`| Phone number fields | +| `username`, `user`, `login`| Username or login fields | +| `password`, `pwd`| Password fields | +| `dob`, `birthdate`, `date of birth`| Date of birth fields | +| `cc`, `card number`, `credit card`| Credit card fields | + +If you still want to use these placeholder values, then you need to disable autofill in your browser settings completely. + ## API FluentTextInput {{ API Type=FluentTextInput }}