Version: Version 1.0

Form Elements

The Form Elements component enables real-time synchronization of form elements, such as input fields, checkboxes, and radio buttons, among participants in the same room as well as seeing who is typing in real-time.

Quickstart

To add the Form Elements component to your application, follow the steps below:

Before we start

Before utilizing the Form Elements component, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the Form Elements component.

Setup your form

To add the Form Elements component on your web page, you will need form elements with unique IDs:

<label>
  <input type="text" id="name" name="name" />
</label>
<label>
  <input type="radio" name="pet" value="cat" id="cat" />
</label>

Add the Form Elements component

To allow this form to synchronize with every participant in the room, you will need to add the following code in your JavaScript file:

import { FormElements } from '@superviz/sdk';

const formElements = new FormElements({
  fields: ['name', 'cat'],
});

room.addComponent(formElements);

Next steps

You are now all set! See what else can you do:

Form Elements API Reference

Resources to get you started

We've prepared a few resources to help you get started with the Form Elements component and use it alosing with other components to create a collaborative environment.

Quickstart​