User Select

Utilities for controlling whether the user can select text in an element.

Disable selecting text

Use userSelect="none" to prevent selecting text in an element and its children.

<x.div userSelect="none">This text is not selectable</x.div>

Allow selecting text

Use userSelect="text" to allow selecting text in an element and its children.

<x.div userSelect="text">This text is selectable</x.div>

Select all text in one click

Use userSelect="all" to automatically select all the text in an element when a user clicks.

<x.div userSelect="all">Click anywhere in this text to select it all</x.div>

Auto

Use userSelect="auto" to use the default browser behavior for selecting text. Useful for undoing other utility like userSelect="none" at different breakpoints.

<x.div userSelect="auto">This text is selectable</x.div>

Responsive

To control user text selection at a specific breakpoint, use responsive object notation. For example, adding the property userSelect={{ md: "none" }} to an element would apply the userSelect="none" utility at medium screen sizes and above.

<x.div userSelect={{ md: 'none' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.