0
# User Select Utilities
1

2
User select utilities control text selection behavior within elements. These utilities are essential for creating polished user interfaces where certain content should or shouldn't be selectable.
3

4
## Capabilities
5

6
### User Selection Control
7

8
Control how users can select text within elements.
9

10
```scss { .api }
11
.select-none { user-select: none; }
12
.select-text { user-select: text; }
13
.select-all { user-select: all; }
14
.select-auto { user-select: auto; }
15
```
16

17
## Usage Examples
18

19
### UI Elements
20

21
```html
22
<!-- Prevent selection on interactive elements -->
23
<button class="select-none p-2 bg-primary text-white border-round cursor-pointer">
24
  Click Me (text can't be selected)
25
</button>
26

27
<!-- Navigation items -->
28
<nav class="select-none">
29
  <ul class="list-none flex gap-3">
30
    <li><a href="#home" class="cursor-pointer">Home</a></li>
31
    <li><a href="#about" class="cursor-pointer">About</a></li>
32
    <li><a href="#contact" class="cursor-pointer">Contact</a></li>
33
  </ul>
34
</nav>
35
```
36

37
### Code and Technical Content
38

39
```html
40
<!-- Select all for easy copying -->
41
<div class="bg-gray-100 p-3 border-round">
42
  <label class="block mb-2 font-bold">Installation Command:</label>
43
  <code class="select-all bg-gray-800 text-white p-2 border-round block">
44
    npm install primeflex
45
  </code>
46
</div>
47

48
<!-- API keys and tokens -->
49
<div class="p-3 border-1 border-round">
50
  <label class="block mb-2">API Key:</label>
51
  <span class="select-all font-mono bg-gray-50 p-2 border-round">
52
    abc123def456ghi789
53
  </span>
54
</div>
55
```
56

57
### Content Areas
58

59
```html
60
<!-- Regular selectable content -->
61
<article class="select-text">
62
  <h2>Article Title</h2>
63
  <p>This paragraph content can be selected normally by the user.</p>
64
  <p>Users can highlight and copy this text as expected.</p>
65
</article>
66

67
<!-- Auto selection behavior -->
68
<div class="select-auto">
69
  <p>This content uses the browser's default selection behavior.</p>
70
</div>
71
```
72

73
### Interactive Components
74

75
```html
76
<!-- Card with non-selectable UI elements -->
77
<div class="border-1 border-round overflow-hidden">
78
  <div class="select-none p-3 bg-primary text-white flex justify-content-between align-items-center">
79
    <h3 class="m-0">Card Header</h3>
80
    <button class="p-1 text-white cursor-pointer">×</button>
81
  </div>
82
  <div class="select-text p-3">
83
    <p>This card content can be selected, but the header and controls cannot.</p>
84
  </div>
85
</div>
86

87
<!-- Draggable elements -->
88
<div class="select-none cursor-move p-3 bg-gray-100 border-round" draggable="true">
89
  <i class="pi pi-bars mr-2"></i>
90
  Drag handle (text not selectable)
91
</div>
92
```
93

94
### Form Elements
95

96
```html
97
<!-- Labels that shouldn't be selected -->
98
<div class="field">
99
  <label class="select-none block mb-2 font-bold">Username</label>
100
  <input type="text" class="select-text w-full p-2 border-1 border-round">
101
</div>
102

103
<!-- Help text -->
104
<div class="field">
105
  <label class="select-none block mb-2">Password</label>
106
  <input type="password" class="w-full p-2 border-1 border-round">
107
  <small class="select-none text-color-secondary mt-1 block">
108
    Must be at least 8 characters long
109
  </small>
110
</div>
111
```
112

113
## Usage Guidelines
114

115
**Select None:**
116
- Use for UI controls, buttons, and navigation elements
117
- Apply to draggable elements and interactive components
118
- Prevents accidental text selection during interactions
119

120
**Select Text:**
121
- Use for main content areas and readable text
122
- Default behavior for most content elements
123
- Explicitly set when child elements might inherit `select-none`
124

125
**Select All:**
126
- Perfect for code snippets, API keys, and URLs
127
- Use for content meant to be copied entirely
128
- Helpful for form inputs with generated values
129

130
**Select Auto:**
131
- Browser's default selection behavior
132
- Useful when you need to override inherited selection styles
133
- Generally equivalent to `select-text` for most content
134

135
**Best Practices:**
136
- Combine `select-none` with `cursor-pointer` for clickable elements
137
- Use `select-all` sparingly, only for content meant to be copied whole
138
- Consider user experience when preventing text selection
139

140
## Responsive Variants
141

142
All user select utilities support responsive variants:
143

144
- `sm:select-none` - Prevent selection on small screens and up
145
- `md:select-text` - Allow selection on medium screens and up
146
- `lg:select-all` - Select all on large screens and up
147
- `xl:select-auto` - Auto selection on extra large screens and up