# Input Decorations Positioning

**MUST** · **ID:** `forms-input-decorations-positioning` · **Category:** forms
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/forms-input-decorations-positioning

> MUST: Absolutely position input prefix/suffix icons on top of the input and pad the input around them — do not place them as flex siblings. Clicking a decoration must focus the input.

Input prefix and suffix decorations should be absolutely positioned inside the input with padding, not next to it

When decorative elements like search icons or currency symbols are placed next to an input in a flex layout, clicking them doesn't focus the input. Position them absolutely inside the input container so the entire area is clickable and the input receives focus.

## Rule snippet

```tsx
<div className="relative">
  <SearchIcon className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2" />
  <input className="pl-9" />
</div>
```

## Bad — do not do this

`forms-input-decorations-positioning-bad`

```tsx
export function InputDecorationsPositioningBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex items-center gap-2">
        <span className="text-muted-foreground">🔍</span>
        <input
          type="text"
          placeholder="Search..."
          className="flex-1 px-3 py-2 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground"
        />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-muted-foreground">$</span>
        <input
          type="text"
          placeholder="0.00"
          className="flex-1 px-3 py-2 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground"
        />
      </div>
      <p className="text-xs text-error">
        Clicking the icon doesn't focus the input, decoration is separate
      </p>
    </div>
  );
}
```

## Good — do this

`forms-input-decorations-positioning-good`

```tsx
export function InputDecorationsPositioningGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="relative">
        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
          🔍
        </span>
        <input
          type="text"
          placeholder="Search..."
          className="w-full pl-9 pr-3 py-2 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
        />
      </div>
      <div className="relative">
        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
          $
        </span>
        <input
          type="text"
          placeholder="0.00"
          className="w-full pl-8 pr-3 py-2 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
        />
      </div>
      <p className="text-xs text-success">
        Icons positioned inside input — click anywhere to focus
      </p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)