@wordpress/interactivity

Interactivity API

A collection of demonstrations showcasing the elegance and power of declarative interactions in the modern web.

❧

Simple Foundations

counter() No. I

The Counter

A humble beginning—numbers that rise and fall at your command.

0
data-wp-interactive data-wp-context data-wp-text data-wp-on--click data-wp-bind--disabled
toggle() No. II

The Toggle

Like a whispered secret, content revealed and concealed at will.

data-wp-bind--hidden data-wp-bind--aria-expanded data-wp-interactive data-wp-context data-wp-on--click data-wp-text
inputBinding() No. III

The Input

Your words reflected back, a mirror of your thoughts.

"Your echo: "

0 characters set to paper

data-wp-bind--value data-wp-on--input data-wp-interactive data-wp-context data-wp-text
classToggle() No. IV

The Transformation

Elements that shift their nature, like moods upon a face.

State: Dormant

Touches: 0

data-wp-class--active data-wp-class--highlighted data-wp-interactive data-wp-context data-wp-text data-wp-on--click
conditional() No. V

The Conditional

Gates that open and close, fields that accept or refuse.

data-wp-bind--disabled data-wp-bind--readonly data-wp-bind--required data-wp-interactive data-wp-context data-wp-class data-wp-bind--value data-wp-bind--checked data-wp-on--input data-wp-on--click
❧

Reactive Compositions

todoList() No. VI

The Task List

Duties inscribed, completed, and struck through—the rhythm of accomplishment.

data-wp-each data-wp-each-key data-wp-interactive data-wp-context data-wp-bind--value data-wp-bind--hidden data-wp-on--input data-wp-on--keydown data-wp-on--click data-wp-class data-wp-text
tabs() No. VII

The Chapters

Navigate between sections as one turns pages in a well-worn book. (Works also with arrow keys)

"Every journey begins with a single click..."

data-wp-bind--aria-selected data-wp-on--keydown data-wp-interactive data-wp-context data-wp-class--active data-wp-on--click data-wp-bind--hidden
accordion() No. VIII

The Accordion

Sections that breathe—expanding and contracting like lungs of text.

First Section ▼
Second Section ▼
Third Section ▼
data-wp-bind--aria-expanded data-wp-class--open data-wp-interactive data-wp-context data-wp-on--click data-wp-bind--hidden data-wp-bind--checked
searchFilter() No. IX

The Filter

Distill the essence from the whole—find what seeks to be found.

0 of 0 items

No items match your search

Derived State Getters data-wp-interactive data-wp-context data-wp-bind--value data-wp-on--input data-wp-class--active data-wp-on--click data-wp-each data-wp-each-key data-wp-text data-wp-bind--hidden
starRating() No. X

The Rating

Assign worth with a gesture—stars aligned to your judgment.

_ (0/5)

data-wp-on--mouseover data-wp-on--mouseleave data-wp-interactive data-wp-context data-wp-class data-wp-each data-wp-each-key data-wp-on--click data-wp-text data-wp-bind--hidden
❧

Advanced Compositions

dragDrop() No. XI

The Reordering

Order is not given—it is shaped.

data-wp-each Array Manipulation data-wp-interactive data-wp-context data-wp-each-key data-wp-class--dragging data-wp-class--drop-target data-wp-on--dragstart data-wp-on--dragover data-wp-on--dragleave data-wp-on--drop data-wp-on--dragend data-wp-text data-wp-on--click data-wp-bind--disabled
formWizard() No. XII

The Journey

A form in acts—each step a scene in your submission.

I Identity
II Contact
III Complete

_

Multi-step State Validation data-wp-interactive data-wp-context data-wp-watch data-wp-class--active data-wp-class--completed data-wp-class data-wp-bind--hidden data-wp-bind--value data-wp-bind--disabled data-wp-on--input data-wp-on--keydown data-wp-on--click data-wp-text
liveSearch() No. XIII

The Explorer

Type and discover—suggestions emerge from the depths of data.

Recent inquiries:

Async Generator splitTask() data-wp-interactive data-wp-context data-wp-init data-wp-bind--value data-wp-bind--hidden data-wp-on--input data-wp-on--keydown data-wp-on--focus data-wp-on-document--click data-wp-each data-wp-each-key data-wp-class--active data-wp-on--click data-wp-text
dataTable() No. XIV

The Registry

A ledger of records—sortable, searchable, paginated through time.

Name ↕ Role ↕ Status

0 of 0 entries

1 / 1
Sorting Pagination Filtering data-wp-interactive data-wp-context data-wp-bind--value data-wp-bind--disabled data-wp-on--input data-wp-on--click data-wp-class--active data-wp-each data-wp-each-key data-wp-class--badge data-wp-text
animation() No. XV

The Motion

Elements in dance—animation as poetry in motion.

Progress: 0% · Loops: 0

1x
data-wp-style data-wp-watch data-wp-interactive data-wp-context data-wp-class--active data-wp-on--click data-wp-style--transform data-wp-style--background-color data-wp-style--width data-wp-text data-wp-bind--hidden data-wp-bind--disabled
🏆

The Masterpiece

A full-featured Kanban board demonstrating all directives and patterns in one cohesive experience. Drag cards between columns, search and filter, create/edit/delete cards, and use keyboard shortcuts (Ctrl+Z/Y for undo/redo, N for new card).

Ctrl+Z Undo · Ctrl+Shift+Z Redo · N New card
No revisions yet. Make changes to see history.
data-wp-each data-wp-on-window--* data-wp-on--dragstart data-wp-interactive data-wp-context data-wp-each-key data-wp-text data-wp-bind--value data-wp-bind--hidden data-wp-bind--disabled data-wp-class--* data-wp-on--click data-wp-on--input data-wp-on--change data-wp-on--blur data-wp-on--keydown data-wp-on--mouseenter data-wp-on--mouseleave data-wp-on--dragend data-wp-on--dragover data-wp-on--dragleave data-wp-on--drop data-wp-watch