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..5c3e011a23 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 @@ -58,6 +58,10 @@ instead of by reference. Without this, previously selected items may not appear {{ AutocompleteComparer }} +## Placeholders and autofill + +{{ INCLUDE PlaceholderAutofill }} + ## API FluentAutocomplete {{ API Type=FluentAutocomplete }} 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..8c879d2e7c 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 @@ -55,6 +55,10 @@ The following example shows how to customize the items: See a similar example on the [FluentSelect](/List/Select#customize-the-items) page. +## Placeholders and autofill + +{{ INCLUDE PlaceholderAutofill }} + ## API FluentCombobox {{ API Type=FluentCombobox }} 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..e679120219 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,12 @@ 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 + +{{ INCLUDE PlaceholderAutofill }} + ## API FluentTextInput {{ API Type=FluentTextInput }} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/General/PlaceholderAutofill.md b/examples/Demo/FluentUI.Demo.Client/Documentation/General/PlaceholderAutofill.md new file mode 100644 index 0000000000..9e7c7be4fc --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/General/PlaceholderAutofill.md @@ -0,0 +1,20 @@ +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.