pointer-events.mdx

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "pointer-events"; export const description = "Utilities for controlling whether an element responds to pointer events.";

<ApiTable rows={[ ["pointer-events-auto", "pointer-events: auto;"], ["pointer-events-none", "pointer-events: none;"], ]} />

Examples

Ignoring pointer events

Use the pointer-events-none utility to make an element ignore pointer events, like :hover and click events:

{

pointer-events-auto

pointer-events-none

}

<!-- [!code classes:pointer-events-none,pointer-events-auto] -->
<div class="relative ...">
  <div class="pointer-events-auto absolute ...">
    <svg class="absolute h-5 w-5 text-gray-400">
      <!-- ... -->
    </svg>
  </div>
  <input type="text" placeholder="Search" class="..." />
</div>

<div class="relative ...">
  <div class="pointer-events-none absolute ...">
    <svg class="absolute h-5 w-5 text-gray-400">
      <!-- ... -->
    </svg>
  </div>
  <input type="text" placeholder="Search" class="..." />
</div>

The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

Restoring pointer events

Use the pointer-events-auto utility to revert to the default browser behavior for pointer events:

<div class="pointer-events-none md:pointer-events-auto ...">
  <!-- ... -->
</div>