Web Component Bridge

WildflowerJS data-model and data-bind working with Nord Health Design System Web Components via the adapter registry.

registerAdapter() data-model data-bind Shadow DOM Nord Health 4.11

01 Two-Way Binding

data-model binds to Nord input fields via the adapter. Type in either field and see state update in real time, including a computed fullName.

firstName:
lastName:
fullName:

02 Multiple Widget Types

nord-input, nord-select, nord-textarea, nord-checkbox, nord-toggle, and nord-range — all bound via adapters.

Satisfaction (0–10)

Live Preview

Dark Mode
/ 10
name:
department:
notes:
newsletter:
darkMode:
satisfaction:

03 Programmatic State Updates

Click a preset button to update state programmatically. The adapter pushes values to Nord components via property assignment.

project:
priority:
Bridge Active
wildflower.full.min.js + Nord Health 4.11