Tab Index Randomization

Form fields with tab order that randomly shuffles, breaking keyboard navigation automation.

Test Your AI See this pattern in action in Level 7: Apply To Be My Browser
Try Level 7

Demo

Checkout Form
Good luck tabbing through this

Press Tab to navigate between fields, watch the order shuffle

React

React
1.import { TabIndexRandomization } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <TabIndexRandomization
6.      fieldCount={3}
7.      shuffleInterval={3000}
8.      showOrder={true}
9.    >
10.      {(fieldIndex, tabIndex) => (
11.        <input
12.          type="text"
13.          placeholder={'Field ' + String.fromCharCode(65 + fieldIndex)}
14.          tabIndex={tabIndex}
15.        />
16.      )}
17.    </TabIndexRandomization>
18.  );
19.}

Vanilla JS

Vanilla JS
1.import { tabIndexRandomization } from 'anti-ai-ui/vanilla';
2.

3.const container = document.getElementById('container');
4.

5.const { destroy } = tabIndexRandomization({
6.  container,
7.  fieldCount: 3,
8.  shuffleInterval: 3000,
9.  showOrder: true
10.});
11.

12.// Call destroy() to remove

Props

Prop Type Default Description
fieldCount number 3 Number of form fields to render
shuffleInterval number 3000 Interval between tab order shuffles (ms)
showOrder boolean true Show current tab order to users
children function undefined Render function receiving (fieldIndex, tabIndex)