User Select

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

React propsCSS Properties
userSelect={keyword}user-select: {keyword};

Disable selecting text

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

<> <template preview> <x.div mx="auto" maxWidth="sm" bg="amber-200" p={2} userSelect="none" textAlign="center" color="gray-500" > This text is not selectable </x.div> </template> <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.

<> <template preview> <x.div mx="auto" maxWidth="sm" bg="emerald-200" p={2} userSelect="text" textAlign="center" color="gray-500" > This text is selectable </x.div> </template> <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.

<> <template preview> <x.div mx="auto" maxWidth="sm" bg="fuchsia-200" p={2} userSelect="all" textAlign="center" color="gray-500" > Click anywhere in this text to select it all </x.div> </template> <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.

<> <template preview> <x.div mx="auto" maxWidth="sm" bg="light-blue-200" p={2} userSelect="auto" textAlign="center" color="gray-500" > This text is selectable </x.div> </template> <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.

Edit this page on GitHub