Collaborative forms

Any inputs, textareas, selects, with a name="" attribute inside <LiveForm> will be shared

Open page in two windows

First name

Age

Tick this box for cool stuff.

Choose a color

Last name

Favorite fruit

Check this box for other stuff.

Pick a date

How to use

Place <input> elements inside <LiveForm> to create shared form elements. Both <LiveForm> and each <input> must have a unique name="" attribute for this to work. Updates are propagated on 'input' events. Compatible with any <input> with a 'value' property, using 'input' events.

---
import LiveForm from 'astro-collab/LiveForm.astro'
---
<LiveForm name="myform">
  <input name="myinput" />
</LiveForm>

---
import 'astro-collab/live-form'
---
<live-form name="myform" client:load>
  <input name="myinput" />
</live-form>

A minimal working example can be found here.

Important note

All multiplayer components must be wrapped in a single LiveblocksRoom component, check the quick start guide for more info.

Components

@ctnicholasdev