Array Field

The array field.


Title Array
Description Field for list of items with same data type or structure.
Field Type array
Base Field Type container


Property Type Default Description
items object Schema for array items.
maxItems number Maximum number of items.
minItems number Minimum number of items.
uniqueItems boolean Item values should be unique if true.


Property Type Default Description
animate boolean true Up and down transitions will be animated
collapsed boolean Field set is initially collapsed if true.
collapsible boolean Field set is collapsible if true.
lazyLoading boolean Child fields will only be rendered when the fieldset is expanded if this option is set true.
legendStyle string button Field set legend style.

Example 1

Array field for an array of text items.

{% raw %} {% endraw %}

Example 2

Array field with options for sticky toolbar, min items, max items etc. Here we use the hideToolbarWithChildren option to keep the top-most button available to add new items to the list. We also hide the add button in the action bar for each row.

{% raw %} {% endraw %}

Example 3

Array field with array default value.

{% raw %} {% endraw %}

Example 4

Array field with string default value.

{% raw %} {% endraw %}

Example 5

Array field with item type as object.

{% raw %} {% endraw %}

Example 6

Nested array field.

{% raw %} {% endraw %}

Example 7

Array field name. Here we set the toolbarPosition option to bottom to position the toolbar below the array.

{% raw %} {% endraw %}

Example 8

Nested Array field name.

{% raw %} {% endraw %}

Example 9

Array field with an extra "clear" button in each item's action bar.

{% raw %} {% endraw %}

Example 10

Array fields support toolbar and actionbar options for defining custom actions. Actions are rendered by the view into the form and usually appear as a button bar.

For the toolbar, Alpaca assumes and auto-populates a single button - add.

For the actionbar (per item), Alpaca assumes and auto-populates the following buttons:

  • add
  • remove
  • up
  • down

Any properties you define for these actions will override the existing presets. Any new actions you define will be added to the overall set. You can explicitly enable or disable actions via the enabled property. Disabled actions are removed from display.

By default, the array field keeps labels turned off. If you want to turn labels on, use the toolbar.showLabels and actionbar.showLabels options.

{% raw %} {% endraw %}

Example 11

Array field rendered in display-only mode.

{% raw %} {% endraw %}

Example 12

An array field with four levels of nesting.

{% raw %} {% endraw %}

Example 13

An array field with nested radio elements.

{% raw %} {% endraw %}

Example 14

An array field with unique items enforced.

{% raw %} {% endraw %}

Example 15

An array field with radio selection embedded.

{% raw %} {% endraw %}

Example 16

An array field with dragAndDrop enabled.

{% raw %} {% endraw %}

Example 17

A nested array field with dragAndDrop enabled.

{% raw %} {% endraw %}