Interactions

React Bootstrap 5 Interactions component

Utility classes that change how users interact with contents of a website.

Text selection

Change the way in which the content is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

        
            
            import React from 'react';
            
            export default function App() {
              return (
                <>
                  <p className="user-select-all">
                    This paragraph will be entirely selected when clicked by the user.
                  </p>
                  <p className="user-select-auto">This paragraph has default select behavior.</p>
                  <p className="user-select-none">
                    This paragraph will not be selectable when clicked by the user.
                  </p>
                <>
              );
            }

Pointer events

Bootstrap provides pe-none and pe-auto classes to prevent or add element interactions.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Show code

        
            
            import React from 'react';
            
            export default function App() {
              return (
                <>
                  <p><a href="#" className="pe-none">This link</a> can not be clicked.</p>
                  <p><a href="#" className="pe-auto">This link</a> can be clicked (this is default behavior).</p>
                  <p className="pe-none">
                    <a href="#">This link</a> can not be clicked because the
                    pointer-events property is inherited from its parent. However,
                    <a href="#" className="pe-auto">this link</a> has a pe-auto class and can be
                    clicked.
                  </p>
                <>
              );
            }

The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the disabled HTML attribute instead.