Traffic Light Form

Form fields with traffic light indicators. Fields only accept input when green. Each cycles at a different rate, forcing users to wait for the right moment.

Demo

Each field only accepts input when its light is green. They cycle at different speeds.

React

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

3.// Mode 1: Auto-generate form
4.function App() {
5.  return (
6.    <TrafficLightForm
7.      fields={[
8.        { name: 'username', label: 'Username', type: 'text' },
9.        { name: 'email', label: 'Email', type: 'email' },
10.      ]}
11.      cycleDuration={{ min: 2000, max: 5000 }}
12.      greenDuration={{ min: 1500, max: 3000 }}
13.    />
14.  );
15.}
16.

17.// Mode 2: Use your own inputs (render prop)
18.function CustomForm() {
19.  return (
20.    <TrafficLightForm
21.      fields={[{ name: 'user', label: 'User' }, { name: 'pass', label: 'Pass' }]}
22.    >
23.      {({ getInputProps, lightStates, TrafficLight }) => (
24.        <div className="my-form">
25.          <TrafficLight state={lightStates[0]} />
26.          <input {...getInputProps(0)} className="my-input" />
27.          <TrafficLight state={lightStates[1]} />
28.          <input {...getInputProps(1)} className="my-input" />
29.        </div>
30.      )}
31.    </TrafficLightForm>
32.  );
33.}

Vanilla JS

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

3.// Mode 1: Auto-generate form
4.const form = createTrafficLightForm({
5.  container: document.getElementById('container'),
6.  fields: [
7.    { name: 'username', label: 'Username', type: 'text' },
8.    { name: 'email', label: 'Email', type: 'email' },
9.  ],
10.  cycleDuration: { min: 2000, max: 5000 },
11.  greenDuration: { min: 1500, max: 3000 }
12.});
13.

14.// Mode 2: Use your own inputs
15.const customForm = createTrafficLightForm({
16.  inputs: [
17.    document.getElementById('my-username'),
18.    document.getElementById('my-email'),
19.  ],
20.  lightContainers: [
21.    document.getElementById('light-1'),
22.    document.getElementById('light-2'),
23.  ],
24.});
25.

26.// Cleanup
27.form.destroy();

Props

Prop Type Default Description
fields array - Array of field configs with name, label, type
cycleDuration { min, max } { min: 2000, max: 5000 } Full cycle duration range in ms
greenDuration { min, max } { min: 1500, max: 3000 } How long green light lasts in ms
yellowDuration number 500 Yellow light duration in ms
children function - Render prop for custom inputs. Receives getInputProps, lightStates, TrafficLight
onChange function - Callback when form values change