Interactivity
User Select
Utilities for controlling whether the user can select text in an element.
Basic usage
Disabling text selection
Use select-none
to prevent selecting text in an element and its children.
The quick brown fox jumps over the lazy dog.
<div className="**select-none** ...">
The quick brown fox jumps over the lazy dog.
</div>
Allowing text selection
Use select-text
to allow selecting text in an element and its children.
The quick brown fox jumps over the lazy dog.
<div className="**select-text** ...">
The quick brown fox jumps over the lazy dog.
</div>
Selecting all text in one click
Use select-all
to automatically select all the text in an element when a user clicks.
The quick brown fox jumps over the lazy dog.
<div className="**select-all** ...">
The quick brown fox jumps over the lazy dog.
</div>
Using auto select behaviour
Use select-auto
to use the default browser behavior for selecting text. Useful for undoing other classNamees like .select-none
at different breakpoints.
The quick brown fox jumps over the lazy dog.
<div className="**select-auto** ...">
The quick brown fox jumps over the lazy dog.
</div>