Reference Source
import {Multifield} from '@adobe/coral-spectrum'
public class | source

Multifield

Expression Extends:

class Multifield extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A Multifield component that enables adding, reordering, and removing multiple instances of a component. Multifield partially supports the template element in IE 11. If adding/removing items in the template is required, template.content should be used. Child elements can be given a special attribute to enable functionality:

  • [coral-multifield-add]. Click to add an item.

See:

Example:

Markup
<coral-multifield></coral-multifield>
JS constructor
new Coral.Multifield();

Member Summary

Public Members
public

The Collection Interface that allows interacting with the Coral.Multifield items that the component contains.

public

Specifies the minimum number of items multifield should render.

public

The Multifield template element.

Public Members

public items: MultifieldCollection source

The Collection Interface that allows interacting with the Coral.Multifield items that the component contains.

  • read-only

public min: Number source

Specifies the minimum number of items multifield should render. If component contains less items, remaining items will be added.

  • 0 by default.
  • reflected

public template: HTMLElement source

The Multifield template element. It will be used to render a new item once the element with the attribute coral-multifield-add is clicked. It supports the template tag. While specifying the template from markup, it should include the coral-multifield-template attribute. NOTE: On IE11, only template.content is supported to add/remove elements to the template.

  • content-zone