2022-09-30 11:39:35 -04:00
---
2022-10-25 09:18:18 -04:00
group: Widgets
title: List
weight: 17
2022-09-30 11:39:35 -04:00
---
2022-11-02 15:42:21 -04:00
- **Name:** `list`
- **UI:** The list widget contains a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets.
- **Data type:** List of widget values
2022-09-30 11:39:35 -04:00
2022-11-02 15:42:21 -04:00
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](/docs/widgets#common-widget-options).
2022-09-30 11:39:35 -04:00
2022-11-02 15:42:21 -04:00
| Name | Type | Default | Description |
| -------------- | ---------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| default | string | `Single item`<br />`(with child defaults)` | _Optional_. The default value for the field. Accepts an array of list items |
| allow_add | boolean | `true` | _Optional_. `false` - Hides the button to add additional items |
| collapsed | boolean | `true` | _Optional_. `true` - The entries collapse by default |
| summary | string | | _Optional_. The label displayed on collapsed entries |
| 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 |
2022-11-04 17:41:12 -04:00
| max | number | | _Optional_. Maximum number of items in the list |
2022-11-02 15:42:21 -04:00
| add_to_top | boolean | `false` | _Optional_. <ul><li>`true` - New entries will be added to the top of the list</li><li>`false` - New entries will be added to the bottom of the list</li></ul> |
| 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 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 |
## Examples
### Basic
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
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
2022-09-30 11:39:35 -04:00
```
2022-11-02 15:42:21 -04:00
### Allow Additions
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
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
2022-09-30 11:39:35 -04:00
```
2022-11-02 15:42:21 -04:00
### Default Value
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
- name: galleryImages
label: Gallery
widget: list
2022-09-30 11:39:35 -04:00
fields:
2022-11-02 15:42:21 -04:00
- name: src
label: Source
widget: string
- name: alt
label: Alt Text
widget: string
2022-09-30 11:39:35 -04:00
default:
2022-11-02 15:42:21 -04:00
- src: /img/tennis.jpg
alt: Tennis
- src: /img/footbar.jpg
alt: Football
2022-09-30 11:39:35 -04:00
```
2022-11-02 15:42:21 -04:00
### Start Collapsed
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
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
2022-09-30 11:39:35 -04:00
```
2022-11-02 15:42:21 -04:00
### Min and Max
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
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
2022-09-30 11:39:35 -04:00
```
2022-11-02 15:42:21 -04:00
### Add To Top
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
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
2022-09-30 11:39:35 -04:00
```
2022-11-02 15:42:21 -04:00
### Typed List
2022-09-30 11:39:35 -04:00
```yaml
2022-11-02 15:42:21 -04:00
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
```