# Interactions Utilities for controlling appearance, cursor styles, pointer events, user selection, and resizing. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-interactions--introduction ## Variants documented in Storybook - InteractionsShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-interactions--interactionsshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Interactions. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Interactions Showcase — Cursors & Selection HTML: ```html
...
...
...
...
``` React: ```jsx import React from 'react'; const InteractionsExample1Demo = () => ( <>
...
...
...
...
); export default InteractionsExample1Demo; ``` Angular: ```html
...
...
...
...
``` ### 2. Interactions Showcase — Pointer Events HTML: ```html
``` React: ```jsx import React from 'react'; const InteractionsExample2Demo = () => ( <>
); export default InteractionsExample2Demo; ``` Angular: ```html
``` ### 3. Interactions Showcase — Element Resizing HTML: ```html ``` React: ```jsx import React from 'react'; const InteractionsExample3Demo = () => ( <> {/* Textarea with vertical resize */} {/* Textarea with no resize */} ); export default InteractionsExample3Demo; ``` Angular: ```html ``` ### 4. Interactions Showcase — Appearance Reset HTML: ```html ``` React: ```jsx import React from 'react'; const InteractionsExample4Demo = () => ( <> {/* Custom checkbox input */} ); export default InteractionsExample4Demo; ``` Angular: ```html ``` ### 5. Introduction — Introduction HTML: ```html
Utilities

Interaction Utilities Reference

A comprehensive reference for browser interaction utilities, including cursors, selection, and resizing.

Comprehensive CSS Class Reference

All available interaction utility classes categorized by function.

Cursors

Format: ux4g-{interaction}-{value}

Pointer ux4g-cursor-pointer
Not Allowed ux4g-cursor-not-allowed

User Selection

Format: ux4g-{interaction}-{value}

None ux4g-select-none
Text ux4g-select-text
All ux4g-select-all
Auto ux4g-select-auto

Pointer Events

Format: ux4g-{interaction}-{value}

None ux4g-pointer-events-none
Auto ux4g-pointer-events-auto

Resize

Format: ux4g-{interaction}-{value}

None ux4g-resize-none
Y ux4g-resize-y

Appearance

Format: ux4g-{interaction}-{value}

None ux4g-appearance-none
``` React: ```jsx import React from 'react'; const InteractionsExample5Demo = () => ( <>
Utilities

Interaction Utilities Reference

A comprehensive reference for browser interaction utilities, including cursors, selection, and resizing.

Comprehensive CSS Class Reference

All available interaction utility classes categorized by function.

{/* Cursors */}

Cursors

Format: ux4g-{interaction}-{value}

Pointer ux4g-cursor-pointer
Not Allowed ux4g-cursor-not-allowed
{/* User Selection */}

User Selection

Format: ux4g-{interaction}-{value}

None ux4g-select-none
Text ux4g-select-text
All ux4g-select-all
Auto ux4g-select-auto
{/* Pointer Events */}

Pointer Events

Format: ux4g-{interaction}-{value}

None ux4g-pointer-events-none
Auto ux4g-pointer-events-auto
{/* Resize */}

Resize

Format: ux4g-{interaction}-{value}

None ux4g-resize-none
Y ux4g-resize-y
{/* Appearance */}

Appearance

Format: ux4g-{interaction}-{value}

None ux4g-appearance-none
); export default InteractionsExample5Demo; ``` Angular: ```html
Utilities

Interaction Utilities Reference

A comprehensive reference for browser interaction utilities, including cursors, selection, and resizing.

Comprehensive CSS Class Reference

All available interaction utility classes categorized by function.

Cursors

Format: ux4g-{interaction}-{value}

Pointer ux4g-cursor-pointer
Not Allowed ux4g-cursor-not-allowed

User Selection

Format: ux4g-{interaction}-{value}

None ux4g-select-none
Text ux4g-select-text
All ux4g-select-all
Auto ux4g-select-auto

Pointer Events

Format: ux4g-{interaction}-{value}

None ux4g-pointer-events-none
Auto ux4g-pointer-events-auto

Resize

Format: ux4g-{interaction}-{value}

None ux4g-resize-none
Y ux4g-resize-y

Appearance

Format: ux4g-{interaction}-{value}

None ux4g-appearance-none
``` ## CSS class reference The following CSS partials define the Interactions utility classes used in the examples above: ### interaction.utilities.css ```css .ux4g-appearance-none { appearance: none; -webkit-appearance: none; } .ux4g-cursor-pointer { cursor: pointer; } .ux4g-cursor-not-allowed { cursor: not-allowed; } .ux4g-pointer-events-none { pointer-events: none; } .ux4g-pointer-events-auto { pointer-events: auto; } .ux4g-select-none { user-select: none; } .ux4g-select-text { user-select: text; } .ux4g-select-all { user-select: all; } .ux4g-select-auto { user-select: auto; } .ux4g-resize-none { resize: none; } .ux4g-resize-y { resize: vertical; } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.