# user-select

> Applies `user-select`.

```ts
import { userSelect } from "@sdxc/u/general";
```

Applies `user-select`. Defaults to `"none"`, the common case of a label,
icon, or drag handle that stays clear of highlight through an incidental
click-drag.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.userSelect()` | `css({ userSelect: "none" })` |
| `u.userSelect("text")` | `css({ userSelect: "text" })` |

## Examples

### Basic example

Use `userSelect()` to keep text from being selected by an incidental click and drag. Try selecting both paragraphs:

```tsx
<div mix={[maxIs(96), ...]}>
	<div>
		<p mix={[...]}>userSelect()</p>
		<p mix={[userSelect()]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>userSelect("auto")</p>
		<p mix={[userSelect("auto")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
</div>
```

### Selecting all at once

Use `userSelect("all")` to select an element's whole text with one click. Click the command:

```tsx
<code mix={[userSelect("all"), font("mono"), ...]}>bun add @sdxc/u</code>
```

### Allowing selection inside

Use `userSelect("text")` to make part of an unselectable area selectable again. Try selecting the name, then the email:

```tsx
<div mix={[userSelect(), ...]}>
	<p mix={[weight("semibold")]}>Ada Lovelace</p>
	<p mix={[userSelect("text"), fg("brand")]}>ada@example.com</p>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.userSelect())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.userSelect())
```

## Signature

```ts
u.userSelect(value?: UserSelectValue)
```