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:

1

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.

2

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>

3

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);

4

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​