Skip to content
Flint
Blog

autocomplete

Ensure the autocomplete attribute is correct and suitable for the form field.

✅ This rule is included in the jsx logical and logicalStrict presets.

The autocomplete attribute helps browsers and assistive technologies automatically fill in form fields based on previously entered information. Using correct autocomplete values improves accessibility and user experience by helping users complete forms more quickly and accurately. The HTML specification defines a specific set of valid autocomplete tokens that must be used to ensure proper functionality.

Examples

Section titled “Examples”
CE6inpCB0tyA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dte1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0autocompleA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dincorre1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6inpCB0tyA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dema1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0autocompleA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dinval1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6inpCB0tyA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dte1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0autocompleA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dname inval1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0autocomp4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4De1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0autocomp4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4De1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dpass1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0autocomp4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dcurrent-pass1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0autocomp4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dbilling street-add1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0autocomp4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E41<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di>

Options

Section titled “Options”

This rule is not configurable.

When Not To Use It

Section titled “When Not To Use It”

If you’re working on a form that intentionally uses non-standard autocomplete values for specific browser or framework integrations, you may want to disable this rule. However, standard autocomplete values are recommended for better cross-browser compatibility and accessibility.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”