BlitzListForm #

Basics #

In some cases you might need a form that's actually a list users can fill in. Eg. Have a form where a teacher can write down names of students in a list.

For this I prepared a special kind of form called a <BlitzListForm /> that offers these features:

• Auto populates the next empty row whenever there is user input
• Rows can have multiple input fields defined by the same schema syntax as BlitzForm
• Can be used as standalone component or inside a BlitzForm between other fields
• Saves the data as an array

Basic Example #

See it in action in the example down here! Write down some student names to see the formData update.

Advanced Example #

When you check the script tab of this more advanced example, you'll notice we are using some new props available on our context of the Dynamic Props. (Be sure to check out the documentation at Advanced > Dynamic Props)

There are 3 extra props available on the context when using BlitzTable & BlitzListForm:

• deleteRow (function)
• rowIndex (number)
• rowData (object or array)
• (all other context props as the BlitzForm documentation also available)

This example uses deleteRow and rowIndex to create a list form where you can delete rows from:

Multi-Row Example #

When you need each row to be multiple rows, you can do so with some CSS tweaking.

See the style tab how this is done for the example below.

BlitzForm Example #

You can use the BlitzListForm inside a BlitzForm. See how that's done in this example: