List

Name: list
UI: The list widget contains a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets. If no ‘fields’ or ‘types’ are provided, the list widget defaults to a text input for entering comma-separated values.
Data type: List of widget values

The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. You can choose any widget as a child of a list widget—even other lists.

Widget Options

For common options, see Common widget options.

Name	Type	Default	Description
default	string	`[ <default from the child fields> ]`	Optional. The default values for fields. Also accepts an array of items
allow_add	boolean	`true`	Optional. `false` – Hides the button to add additional items. Ignored if both `fields` and `types` are not defined
collapsed	boolean	`true`	Optional. `true` – The list and entries collapse by default. Ignored if both `fields` and `types` are not defined
summary	string		Optional. The label displayed on collapsed entries. Can use Template Transformations. Ignored for single field lists.
label_singular	string	`label`	Optional. The text to show on the add button
fields	list of widgets	[]	Optional. A nested list of multiple widget fields to be included in each repeatable iteration
min	number		Optional. Minimum number of items in the list
max	number		Optional. Maximum number of items in the list
add_to_top	boolean	`false`	Optional. `true` – New entries will be added to the top of the list`false` – New entries will be added to the bottom of the listIgnored if both `fields` and `types` are not defined
types	list of object widgets		Optional. A nested list of object widgets representing the available types for items in the list. Takes priority over `fields`.
type_key	string	`'type'`	Optional. The name of the individual field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if `types` is not defined
delimiter	string	`','`	Optional. The delimiter to use when entering a delimiter separated list. Ignored if `fields` or `types` are defined

Examples

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

name: 'testimonials',
label: 'Testimonials',
widget: 'list',
summary: '{{fields.quote}} - {{fields.author.name}}',
fields: [
  {
    name: 'quote',
    label: 'Quote',
    widget: 'string',
    default: 'Everything is awesome!'
  },
  {
    name: 'author',
    label: 'Author',
    widget: 'object',
    fields: [
      {
        name: 'name',
        label: 'Name',
        widget: 'string',
        default: 'Emmet'
      },
      {
        name: 'avatar',
        label: 'Avatar',
        widget: 'image',
        default: '/img/emmet.jpg'
      },
    ],
  },
],

Allow Additions

YAML
JavaScript

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
allow_add: false
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

name: 'testimonials',
label: 'Testimonials',
widget: 'list',
summary: '{{fields.quote}} - {{fields.author.name}}',
allow_add: false,
fields: [
  {
    name: 'quote',
    label: 'Quote',
    widget: 'string',
    default: 'Everything is awesome!'
  },
  {
    name: 'author',
    label: 'Author',
    widget: 'object',
    fields: [
      {
        name: 'name',
        label: 'Name',
        widget: 'string',
        default: 'Emmet'
      },
      {
        name: 'avatar',
        label: 'Avatar',
        widget: 'image',
        default: '/img/emmet.jpg'
      },
    ],
  },
],

Default Value

YAML
JavaScript

name: galleryImages
label: Gallery
widget: list
fields:
  - name: src
    label: Source
    widget: string
  - name: alt
    label: Alt Text
    widget: string
default:
  - src: /img/tennis.jpg
    alt: Tennis
  - src: /img/footbar.jpg
    alt: Football

name: 'galleryImages',
label: 'Gallery',
widget: 'list',
fields: [
  {
    name: 'src',
    label: 'Source',
    widget: 'string'
  },
  {
    name: 'alt',
    label: 'Alt Text',
    widget: 'string'
  },
],
default: [
  {
    src: '/img/tennis.jpg',
    alt: 'Tennis'
  },
  {
    src: '/img/footbar.jpg',
    alt: 'Football'
  },
],

Start Collapsed

YAML
JavaScript

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
collapsed: false
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

name: 'testimonials',
label: 'Testimonials',
widget: 'list',
summary: '{{fields.quote}} - {{fields.author.name}}',
collapsed: false,
fields: [
  {
    name: 'quote',
    label: 'Quote',
    widget: 'string',
    default: 'Everything is awesome!'
  },
  {
    name: 'author',
    label: 'Author',
    widget: 'object',
    fields: [
      {
        name: 'name',
        label: 'Name',
        widget: 'string',
        default: 'Emmet'
      },
      {
        name: 'avatar',
        label: 'Avatar',
        widget: 'image',
        default: '/img/emmet.jpg'
      },
    ],
  },
],

Min and Max

YAML
JavaScript

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
min: 1
max: 3
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

name: 'testimonials',
label: 'Testimonials',
widget: 'list',
summary: '{{fields.quote}} - {{fields.author.name}}',
min: 1,
max: 3,
fields: [
  {
    name: 'quote',
    label: 'Quote',
    widget: 'string',
    default: 'Everything is awesome!'
  },
  {
    name: 'author',
    label: 'Author',
    widget: 'object',
    fields: [
      {
        name: 'name',
        label: 'Name',
        widget: 'string',
        default: 'Emmet'
      },
      {
        name: 'avatar',
        label: 'Avatar',
        widget: 'image',
        default: '/img/emmet.jpg'
      },
    ],
  },
],

Add To Top

YAML
JavaScript

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
add_to_top: true
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

name: 'testimonials',
label: 'Testimonials',
widget: 'list',
summary: '{{fields.quote}} - {{fields.author.name}}',
add_to_top: true,
fields: [
  {
    name: 'quote',
    label: 'Quote',
    widget: 'string',
    default: 'Everything is awesome!'
  },
  {
    name: 'author',
    label: 'Author',
    widget: 'object',
    fields: [
      {
        name: 'name',
        label: 'Name',
        widget: 'string',
        default: 'Emmet'
      },
      {
        name: 'avatar',
        label: 'Avatar',
        widget: 'image',
        default: '/img/emmet.jpg'
      },
    ],
  },
],

Delimiter Separated List

YAML
JavaScript

name: tags
label: Tags
widget: list
delimiter: ';' # Default: ','
default:
  - 'tag-1'
  - 'tag-2'

name: 'tags',
label: 'Tags',
widget: 'list',
delimiter: ';', // Default: ','
default: [
  'tag-1',
  'tag-2'
]

Singleton List (List of Strings)

YAML
JavaScript

name: sections
label: Home Section
widget: list
default:
  - 'tag-1'
  - 'tag-2'
fields:
  - name: tag
    label: Tag
    widget: string

name: 'sections',
label: 'Home Section',
widget: 'list',
default: [
  'tag-1',
  'tag-2'
]
fields: [
  {
    name: 'tag',
    label: 'Tag',
    widget: 'string',
  },
]

Typed List

YAML
JavaScript

name: sections
label: Home Section
widget: list
types:
  - name: carousel
    label: Carousel
    widget: object
    summary: '{{fields.header}}'
    fields:
      - name: header
        label: Header
        widget: string
        default: Image Gallery
      - name: template
        label: Template
        widget: string
        default: carousel.html
      - name: images
        label: Images
        widget: list
        fields:
          - name: image
            label: Image
            widget: image
  - name: spotlight
    label: Spotlight
    widget: object
    fields:
      - name: header
        label: Header
        widget: string
        default: Spotlight
      - name: template
        label: Template
        widget: string
        default: spotlight.html
      - name: text
        label: Text
        widget: text
        default: Hello World

name: 'sections',
label: 'Home Section',
widget: 'list',
types: [
  {
    name: 'carousel',
    label: 'Carousel',
    widget: 'object',
    summary: '{{fields.header}}',
    fields: [
      {
        name: 'header',
        label: 'Header',
        widget: 'string',
        default: 'Image Gallery'
      },
      {
        name: 'template',
        label: 'Template',
        widget: 'string',
        default: 'carousel.html'
      },
      {
        name: 'images',
        label: 'Images',
        widget: 'list',
        fields: [
          {
            name: 'image',
            label: 'Image',
            widget: 'image'
          }
        ],
      },
    ],
  },
  {
    name: 'spotlight',
    label: 'Spotlight',
    widget: 'object',
    fields: [
      {
        name: 'header',
        label: 'Header',
        widget: 'string',
        default: 'Spotlight'
      },
      {
        name: 'template',
        label: 'Template',
        widget: 'string',
        default: 'spotlight.html'
      },
      {
        name: 'text',
        label: 'Text',
        widget: 'text',
        default: 'Hello World'
      },
    ],
  },
],

docs