# Disable User Select on Interactive Elements

**SHOULD** · **ID:** `interactions-user-select-interactive` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-user-select-interactive

> SHOULD: Set `user-select: none` on the inner content of interactive elements (buttons, tabs, menu items) so click-drag never selects their label text.

Interactive elements should disable user-select for inner content to prevent accidental text selection

When users click and drag on buttons, tabs, or other interactive controls, they may accidentally select the text inside. Apply user-select: none to prevent this and create a more polished interaction feel.

## Rule snippet

```tsx
button, [role="tab"] { user-select: none; }
```

## Bad — do not do this

`interactions-user-select-interactive-bad`

```tsx
export function UserSelectInteractiveBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <button className="w-full px-4 py-3 bg-primary text-primary-foreground rounded-lg text-sm font-medium">
          📋 Copy to Clipboard
        </button>
        <button className="w-full px-4 py-3 bg-primary text-primary-foreground rounded-lg text-sm font-medium">
          ⬇️ Download File
        </button>
        <button className="w-full px-4 py-3 bg-primary text-primary-foreground rounded-lg text-sm font-medium">
          🔗 Share Link
        </button>
      </div>
      <p className="text-xs text-error">
        Try clicking and dragging — text inside buttons gets selected
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-user-select-interactive-good`

```tsx
export function UserSelectInteractiveGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <button className="w-full px-4 py-3 bg-primary text-primary-foreground rounded-lg text-sm font-medium select-none">
          📋 Copy to Clipboard
        </button>
        <button className="w-full px-4 py-3 bg-primary text-primary-foreground rounded-lg text-sm font-medium select-none">
          ⬇️ Download File
        </button>
        <button className="w-full px-4 py-3 bg-primary text-primary-foreground rounded-lg text-sm font-medium select-none">
          🔗 Share Link
        </button>
      </div>
      <p className="text-xs text-success">
        user-select: none prevents accidental text selection
      </p>
    </div>
  );
}
```

## References

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