# Positive tabindex Values

**NEVER** · **ID:** `interactions-rams-tabindex` · **Category:** interactions
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-rams-tabindex

> NEVER: Use positive tabIndex values (>0) as they disrupt natural tab order. Use tabIndex="0" to add to flow, tabIndex="-1" for programmatic focus only.

Avoid positive tabindex values that disrupt natural tab order

Rams ships this as a Moderate checklist row, not prose. Our reading: natural tab order follows the DOM, and a positive tabindex creates a parallel ordering system on top of it. Use tabindex="0" to join the natural order, or tabindex="-1" for programmatic-only focus.

## Bad — do not do this

`interactions-rams-tabindex-bad`

```tsx
export function RamsTabindexBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Disrupted Tab Order</h4>
        <div className="space-y-3">
          <div className="flex flex-col gap-2 p-3 bg-muted rounded-lg">
            <input
              type="text"
              placeholder="Visual 1st, tab 3rd"
              tabIndex={3}
              className="px-3 py-2 border border-border rounded-md bg-background text-sm"
            />
            <input
              type="text"
              placeholder="Visual 2nd, tab 1st"
              tabIndex={1}
              className="px-3 py-2 border border-border rounded-md bg-background text-sm"
            />
            <button
              tabIndex={2}
              className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm"
            >
              Visual 3rd, tab 2nd
            </button>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code className="text-error">tabIndex=3, tabIndex=1, tabIndex=2</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-error">
        Try tabbing - order is confusing and unpredictable
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-rams-tabindex-good`

```tsx
export function RamsTabindexGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Natural Tab Order</h4>
        <div className="space-y-3">
          <div className="flex flex-col gap-2 p-3 bg-muted rounded-lg">
            <input
              type="text"
              placeholder="First (tab order: 1)"
              className="px-3 py-2 border border-border rounded-md bg-background text-sm"
            />
            <input
              type="text"
              placeholder="Second (tab order: 2)"
              className="px-3 py-2 border border-border rounded-md bg-background text-sm"
            />
            <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
              Third (tab order: 3)
            </button>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code>No tabindex needed - DOM order = tab order</code>
          </div>
        </div>
      </div>
      <p className="text-xs text-success">
        Tab order matches visual order - predictable navigation
      </p>
    </div>
  );
}
```

## References

- [Rams review checklist](https://www.rams.ai/rams.md)
- [WCAG 2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)