Data binding with nested Twig components for arrays?

[adri]

Checkbox component

{% props class = '' %}

{% set checkbox = html_cva(
    base: 'h-4 w-4 shrink-0 rounded-xs border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
) %}

<input type="checkbox" class="{{ checkbox.apply({ }, class) | tailwind_merge }}" {{ attributes | raw }} />

This is similar to the Checkbox component @Kocal has been working on in the shadcn Toolkit.
https://github.com/symfony/ux/blob/2.x/src/Toolkit/kits/shadcn/docs/components/Checkbox.md

My goal is to use data binding like this.

 <twig:Checkbox data-model="lists[]" />

In the docs I read that I can use dataModel instead, however I can't get it to work for arrays [] like in the docs.

Any ideas?

[sergio-santiago]

Data binding with nested Twig components for arrays (UX Live Components)

Short answer: Use a single data-model without [] (e.g. data-model="lists") on each
checkbox and give each input a value. Bind that to a writable array LiveProp.
When nesting Twig components, forward the attributes so data-model reaches the <input>.

This works with UX Live Components; arrays are supported as LiveProp values.

---

1) Live component class

// src/Twig/Components/Filters.php
namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;

#[AsLiveComponent('filters')]
final class Filters
{
    /** @var string[] */
    #[LiveProp(writable: true)]
    public array $lists = []; // will contain selected values, e.g. ['a', 'b']
}

LiveProp supports arrays of scalars, so this is fine.

---

2) Nested Checkbox Twig component

{# templates/components/Checkbox.html.twig #}
{% props class = '', value = '' %}

{% set checkbox = html_cva(
    base: 'h-4 w-4 shrink-0 rounded-xs border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
) %}

<input
  type="checkbox"
  value="{{ value }}"
  class="{{ checkbox.apply({}, class) | tailwind_merge }}"
  {{ attributes|raw }}
/>

Important: we do not hardcode data-model here. We forward any incoming attributes
(including data-model) with {{ attributes }} so the parent can control binding.

---

3) Parent Live template using the nested component

{# templates/components/Filters.html.twig #}
<twig:Checkbox data-model="lists" value="news"   class="mr-2" />
<twig:Checkbox data-model="lists" value="sports" class="mr-2" />
<twig:Checkbox data-model="lists" value="tech"   class="mr-2" />

{# Debug output #}
<div class="mt-2 text-sm">Selected: {{ lists|join(', ') }}</div>

Notes:

• Use data-model="lists" (no []).
• Give each checkbox a distinct value.
• UX will push/pop the value in the lists array when the user checks/unchecks.

---

4) If you also render this from a Symfony Form

If your checkbox component is used inside a Form row and you need name="lists[]" for a normal
form submit, you can add a default name without breaking LiveComponents:

<input
  type="checkbox"
  name="{{ attributes.name ?? 'lists[]' }}"
  value="{{ value }}"
  {{ attributes|raw }}
/>

LiveComponents relies on data-model for two‑way binding; the name="lists[]" is only for
non‑AJAX form posts.

---

5) Common gotchas

• Don’t write data-model="lists[]" → use data-model="lists".
• Ensure each checkbox has a value (string/number).
• When nesting, always forward attributes so data-model reaches the <input>.
• For deep structures, bind to another array (e.g. data-model="filters.categories")
  and mark the property writable.

References

• Live Components support arrays as model values (LiveProp data types).
• Known checkbox/array behavior has been discussed and fixed in the tracker.

Docs: Symfony UX Live Components (LiveProp types, binding)
Issues: checkbox/array model updates

---

TL;DR

Use data-model="lists" on each <twig:Checkbox ... value="..."> and forward attributes in the
nested component. Back it with #[LiveProp(writable: true)] public array $lists = [];.