Loading navigation…
User
API and Development
Interactable is used to add keyboard accessibility and interactive behavior to any element, making non-interactive elements like divs function as accessible buttons. 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.
| 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. |
Use interaction types to apply different styling effects.
Use to make entire complex layouts interactive as a single unit.
Use with href to create link-like behavior.
Combine with mouse event handlers for rich interactions.
Use drag event handlers to create draggable or droppable elements.
Use to create interactive table rows or cells.
Add custom classes for specific visual treatments.
Handle nested interactive elements carefully to avoid conflicts.
Combine with keyboard event handlers for enhanced interactions.
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.
Use to create clickable card components with proper accessibility.
Use to create interactive list items that respond to clicks and keyboard navigation.
Use to indicate the currently selected or active element.
Use to prevent interaction while maintaining visual presence.
On this page