User Select

User select utilities control whether users can select text inside an element. Use them to prevent accidental text selection on UI controls, to enable instant select-all on copyable values, or to restore the browser default wherever needed.

All user select utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	CSS Output	Description
`select-none`	`user-select: none`	Prevent text selection.
`select-text`	`user-select: text`	Allow text selection.
`select-all`	`user-select: all`	Select all content on a single click.
`select-auto`	`user-select: auto`	Use browser default behavior.

Usage

Prevent accidental selection

Apply select-none to buttons, tabs, nav items, draggable handles, and any UI chrome where text selection would feel unintentional.

<button class="select-none cursor-pointer">
  Save Changes
</button>

Selectable text

Apply select-text to explicitly mark an area as selectable — useful inside a parent that has select-none set.

<p class="select-text">
  This paragraph can be selected by the user.
</p>

Select all

Apply select-all so the entire content is selected on a single click. Ideal for copyable commands, API keys, tokens, and short code snippets.

<code class="select-all">
  npm install frontalign
</code>

Restore browser default

Apply select-auto to reset selection behavior to the browser default after an ancestor has changed it.

<div class="select-auto">
  Default selection behavior
</div>

Real-world examples

Copyable install command

<div class="border rounded-3">
  <code class="select-all">
    npm install frontalign
  </code>
</div>

Drag handle

<button class="cursor-grab select-none">
  Drag
</button>

Select all + code block

<pre>
  <code class="select-all">
    npx frontalign build
  </code>
</pre>

Cursor + select

<button class="cursor-pointer select-none">
  Open Menu
</button>

Choosing the right utility

Use case	Recommended utility
Copyable command or token	`select-all`
Prevent accidental selection	`select-none`
Explicitly selectable content	`select-text`
Reset to browser default	`select-auto`

Usage notes

Use select-none for buttons, tabs, nav items, drag handles, and all UI controls.
Use select-all for short copyable values — commands, tokens, API keys, and CLI snippets.
Avoid disabling text selection on long-form content such as articles and documentation.
Combine select-none with cursor-pointer on interactive controls for a complete, polished interaction state.
Use select-auto to undo a parent's select-none on a specific child without setting an explicit value.