Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

interactionsRauno

Disable User Select on Interactive Elements

SHOULD

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

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

Bad

Good

Why it matters

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.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.