Interactable

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Interactable is used to add keyboard accessibility and interactive behavior to any element, making non-interactive elements like divs function as accessible buttons. It is always a tab stop. A full-viewport capture overlay is not an Interactable: in @prepared911/ui that overlay is a Box with aria-hidden, the pointer listener is attached through a ref because Box drops click handlers, and the annotation mode toggle stays the keyboard path that starts capture. It provides a versatile wrapper that transforms any element into a keyboard-accessible, interactive component. Built using Radix UI's Slot component, it enables proper button semantics and keyboard interactions without requiring changes to the underlying element structure.

Props

Name	Default	Description
`interactionType`	`InteractableType.Default`	Enum for interaction styling variants. Other variations of `InteractableType` include `Default \| Primary \| Secondary`.
`active`	`false`	Whether the interactable is in an active/selected state.
`disabled`	`false`	Whether the interactable is disabled and cannot be interacted with.
`tabIndex`	`0` when enabled, `-1` when disabled	Overrides the default tab order. Pass `-1` for composite widgets that keep focus elsewhere (for example `aria-activedescendant` lists).
`injectChild`	`false`	Whether to inject interactivity into a child element (using Radix UI Slot) instead of wrapping in a button.
`className`		Additional CSS classes to apply to the element.
`onClick`		Callback function called when the element is clicked or activated via keyboard.
`onMouseEnter`		Callback function called when the mouse enters the element.
`onMouseLeave`		Callback function called when the mouse leaves the element.
`onMouseDown`		Callback function called when mouse button is pressed down.
`onMouseUp`		Callback function called when mouse button is released.
`onMouseMove`		Callback function called when mouse moves over the element.
`onKeyDown`		Callback function called when a key is pressed.
`onKeyUp`		Callback function called when a key is released.
`onDragEnter`		Callback function called when a dragged element enters the drop zone.
`onDragLeave`		Callback function called when a dragged element leaves the drop zone.
`onDragOver`		Callback function called when a dragged element is over the drop zone.
`onDrop`		Callback function called when a dragged element is dropped.
`onDragStart`		Callback function called when dragging starts.
`onDragEnd`		Callback function called when dragging ends.
`href`		URL to navigate to when the element is clicked (converts to link behavior).
`children`	`required`	The content to make interactive.

Interactive card

With Interaction Types

Use interaction types to apply different styling effects.

Default

Primary

Secondary

Complex Layouts

Use to make entire complex layouts interactive as a single unit.

Use with href to create link-like behavior.

With Hover Effects

Combine with mouse event handlers for rich interactions.

With Drag and Drop

Use drag event handlers to create draggable or droppable elements.

In Data Tables

Use to create interactive table rows or cells.

With Custom Styling

Add custom classes for specific visual treatments.

Nested Interactive Elements

Handle nested interactive elements carefully to avoid conflicts.

With Keyboard Shortcuts

Combine with keyboard event handlers for enhanced interactions.

With Inject Child

Use injectChild to inject interactivity directly into the child element using Radix UI's Slot, maintaining the child's element type while adding interactive behavior.

Interactive Cards

Use to create clickable card components with proper accessibility.

Interactive List Items

Use to create interactive list items that respond to clicks and keyboard navigation.

With Active State

Use to indicate the currently selected or active element.

Disabled State

Use to prevent interaction while maintaining visual presence.

Interactable / Usage

Accessibility / Keyboard Support