# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/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:

<Figure hint="Click the search icons to see the expected behavior">

<Example>
  {
    <div className="grid grid-cols-1 gap-10 px-0 sm:grid-cols-2 sm:px-10">
      <div className="flex flex-col">
        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">pointer-events-auto</p>
        <div className="relative w-full rounded-lg shadow-sm">
          <div className="pointer-events-auto absolute inset-y-0 left-0 flex items-center pl-3">
            <svg className="absolute h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
              <path
                fillRule="evenodd"
                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                clipRule="evenodd"
              />
            </svg>
          </div>
          <input
            type="text"
            placeholder="Search"
            className="dark:highlight-white/5 block w-full rounded-lg px-3 py-2 pl-10 font-sans text-sm text-gray-500 ring-1 ring-gray-900/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-0"
          />
        </div>
      </div>
      <div className="flex flex-col">
        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">pointer-events-none</p>
        <div className="relative w-full rounded-lg shadow-sm">
          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <svg className="absolute h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
              <path
                fillRule="evenodd"
                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                clipRule="evenodd"
              />
            </svg>
          </div>
          <input
            type="text"
            placeholder="Search"
            className="dark:highlight-white/5 block w-full rounded-lg px-3 py-2 pl-10 font-sans text-sm text-gray-500 ring-1 ring-gray-900/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-0"
          />
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!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>
```

</Figure>

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:

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