Anything with Drag & Drop functionality. When users press inside the draggable to try and move it, sometimes text will select instead and need to be cleared before dragging (particularly annoying on mobile devices).

Also video controls that use the UNICODE characters for e.g. play/pause/stop/etc instead of graphic icons (so it scales better at higher DPI). You don't want people to be able to select the text inside the button when pushing the button.

There's actually tons of great usage of user-select: none. This is definitely not one of them though.

It's often a bad idea, but here's some when I used it:

- Widget labels (time, short text, etc)

- Buttons, when text is just an arrow >

  (I know, just use <button>) :)

- When double click makes accidental text selection on UI. I had this for a whole page overlay displaying a song's artist and title. (there's another link to the source with selectable text)

- Navigation, but that might be bad too

I've used it on elements with text where click-and-drag and double-click are supposed to be used for a different purpose than text selection.

Navigational elements, such as a list of clickable links. Gets really annoying when the user is trying to select text, their finger slips and suddenly half the menus on the page are highlighted, and now you need to take into account non-euclidean geometry to get them unhighlighted.

An example where this might be appropriate: using font icons. Selecting an unusable unicode character is not what most users want.

I disabled the selection of various components in apps along the years when I simply find myself accidentally selecting things in regular use that break things or creat selection states that are hard to exit. Most recently it was in a modal-heavy media gallery SPA. If you click and drag outside of a modal when you mean to click, it highlights a grid of media elements that’s hard to exit and really makes for a wonky experience. Like all UX work, you don’t notice it when it’s done well.

Custom buttons that doesn't use the button tag but is made up of a div which has multiple elements like an avatar & a username, icon for a dropdown

> Custom buttons that doesn't use the button tag

Which should also be avoided

Drag and drop. It's annoying when you go to drag something and end up selecting text instead.

I use it for some drag and drop stuff where selecting text would get in the way and would be largely unnecessary (e.g. reordering table columns by dragging a header cell), but that's about it.

Imagine a list of objects with descriptions or names and these objects need to be drag/dropped. It would make since to disable highlight the object names by mistake.

In our application we disallow generated command lines for selection and provide a safe "copy command" icon. As my u see a visual correct command (for a browser view) the resulting select + copy don't include f.e. whitespaces.

I'm afraid that is a near-universally hated design choice

It's an command builder where you can drag and drop arguments too - overall user selection don't make sense for this purpose - at least not in our case.

Copy command button ends up not working, making the user retype the whole command by hand.

Good going.