field.list

A component that allows the user to add and remove list items, such as text fields to fill in.

This way you can allow the user to give multiple answers to a question.

View example in the sandbox.

The list items can contain any component, including a list of other components. For example, this allows you to create a table where you can add and delete rows.

View example in the sandbox.

Managing components

To add a new list item, the user clicks the button. To remove an item, they click on the x on the right (it appears when hovering over a list item).

To prevent the user from adding too many list items, set the maximum list length. You can also use the editable property to block users from changing a component, like when a certain event occurs.

Component properties

NameTypeDescription
type*"field.list"

Set component type

data*writable

Data with values that will be processed or changed.

labelstring

Label above the component.

buttonLabelstring

Text on the button for adding list items.

directionstring

The direction of the list:

  • vertical (default).
  • horizontal
editableboolean

A property that indicates whether adding and removing list items is allowed. Set false to disable. By default it is true (allowed).

hintstring

Hint text.

maxLengthnumber

Maximum number of list items.

render*view

Interface template for list items, such as a text field.

In nested field.* components, use data.relative for recording responses, otherwise all the list items will have the same value.

sizestring

The distance between list items. Acceptable values in ascending order: s, m (default).

validationcondition

Validation based on condition.