UI Support for Multi-Value Prop Configuration for Code Components
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3571917. -->
Reported by: [kunal.sachdev](https://www.drupal.org/user/3685163)
Related to !548
>>>
<h3 id="overview">Overview</h3>
<p>Currently there is no UI for creating multi valued props in Code component editor.. We need to enhance the Component Builder UI to support multi-value configuration for props based on the selected prop type, as shown in the attached screenshot.</p>
<p><strong>IN SCOPE</strong><br>
This ticket focuses only on the front-end behavior and UI interactions. </p>
<p><strong>OUT OF SCOPE</strong><br>
Saving or persisting prop configuration will be handled at <a href="https://www.drupal.org/project/canvas/issues/3572553">https://www.drupal.org/project/canvas/issues/3572553</a><br>
Multi-value required field validation will be handled in <a href="https://www.drupal.org/project/canvas/issues/3576124">https://www.drupal.org/project/canvas/issues/3576124</a></p>
<p><strong>Supported Prop Types</strong>
</p><ul>
<li>Text</li>
<li>Link</li>
<li>Image</li>
<li>Video</li>
<li>Integer</li>
<li>Number</li>
<li>Date</li>
<li>List (Text)</li>
<li>List (Integer)</li>
</ul>
<p><strong>Not Supported</strong>
</p><ul>
<li>Formatted Text</li>
<li>Boolean</li>
</ul>
<p>For these two types, the “Allow multiple values” option must not be visible.</p>
<p><strong>Behavior Overview</strong></p>
<ul>
<li>When a prop type is selected:
<ul>
<li>The “Allow multiple values” checkbox is shown for all supported types.</li>
<li>The checkbox is hidden for:
<ul>
<li>Formatted Text</li>
<li>Boolean</li>
</ul>
</li>
</ul>
</li>
<li>Changing the prop type should reset the “Allow multiple values” selection and related controls.</li>
</ul>
<p><strong>Multi-Value Configuration Behavior</strong><br>
The UI should allow component builders to define whether a prop supports multiple values, and if so, whether those values are limited or unlimited, with corresponding controls and interactions.</p>
<ol>
<li>Allow Multiple Values (Checkbox)
<ul>
<li>Visible only for supported types.</li>
<li>Skipped for unsupported types.</li>
<li>Unchecked by default when switching prop types.</li>
</ul>
</li>
<li>Value Limit Selection<br>
When Allow multiple values is checked:<br>
Show a dropdown with options:
<ul>
<li>Limited</li>
<li>Unlimited</li>
</ul>
<p><strong>Limited</strong></p>
<ul>
<li>Show a numeric input to define the maximum number of allowed values.</li>
<li>Example values:
<ul>
<li>Are displayed as fixed rows.</li>
<li>No delete icon is shown.</li>
<li>Drag & drop is enabled for reordering.</li>
</ul>
</li>
</ul>
<p><strong>Unlimited</strong></p>
<ul>
<li>No numeric limit input is shown.</li>
<li>Example values:
<ul>
<li>Show a delete icon per value.</li>
<li>Show a “+ Add value” button.</li>
<li>Drag & drop is enabled for reordering.</li>
</ul>
</li>
</ul>
</li>
</ol>
<h3 id="ui-changes">Acceptance Criteria</h3>
<ul>
<li>“Allow multiple values” checkbox is shown for all supported prop types.</li>
<li> “Allow multiple values” is hidden for Formatted Text and Boolean types.</li>
<li> Changing the prop type resets multi-value configuration.</li>
<li> When multi-value is enabled, user can choose Limited or Unlimited.</li>
<li> Limited mode:
<ul>
<li> Numeric limit input is shown.</li>
<li> No delete icon for example values.</li>
</ul>
</li>
<li> Unlimited mode:
<ul>
<li> “+ Add value” button is visible.</li>
<li> Delete icon is shown for each example value.</li>
<li> Drag & drop ordering works for example values in both modes.</li>
</ul>
</li>
<li> UI behavior matches the attached design/screenshot.</li>
<li> No backend saving or persistence is included in this ticket.</li>
<li> Design:-<br>
<img src="https://www.drupal.org/files/issues/2026-02-06/multivalue_props.png" alt="multi-value props design"><br>
<img src="https://www.drupal.org/files/issues/2026-02-10/Multi%20valued%20props%20code%20component%20design.png">
</li>
</ul>
issue