Larastrap
Larastrap provides many "container" components: those having a child HTML block to be wrapped within the container itself. All of them share a few parameters.
obj is used in particular for x-larastrap::form , but can be used in any Container to define a source for values in child nodes.
@php
$obj = (object) ['name' => 'Foo', 'bio' => 'A very smart guy!', 'email' => 'foo@bar.baz'];
@endphp
<x-larastrap::accordion :obj="$obj">
<x-larastrap::accordionitem label="Contacts">
<x-larastrap::text name="name" readonly squeeze />
<x-larastrap::text name="email" readonly squeeze />
</x-larastrap::accordionitem>
<x-larastrap::accordionitem label="Bio">
<x-larastrap::text name="bio" readonly squeeze />
</x-larastrap::accordionitem>
</x-larastrap::accordion>
<div class="accordion" id="accordion-70a74a02341c5b1a3525fdbeae90071f">
<div class="accordion-item">
<h2 class="accordion-header" id="head-accordionitem-c3a834c0df684c4fe33a091e577b8a6b">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-c3a834c0df684c4fe33a091e577b8a6b" aria-expanded="false" aria-controls="accordionitem-c3a834c0df684c4fe33a091e577b8a6b">Contacts</button>
</h2>
<div id="accordionitem-c3a834c0df684c4fe33a091e577b8a6b" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-c3a834c0df684c4fe33a091e577b8a6b" data-bs-parent="#accordion-70a74a02341c5b1a3525fdbeae90071f">
<div class="accordion-body">
<input id="input-48858aaa938b69ad134cf7521f733107" type="text" class="form-control-plaintext" name="name" value="Foo" readonly> <input id="input-8f35e385338dffa1673998cc3267c9c8" type="text" class="form-control-plaintext" name="email" value="foo@bar.baz" readonly>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="head-accordionitem-d72581cf3434d6f290f3811a54e7b9f1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-d72581cf3434d6f290f3811a54e7b9f1" aria-expanded="false" aria-controls="accordionitem-d72581cf3434d6f290f3811a54e7b9f1">Bio</button>
</h2>
<div id="accordionitem-d72581cf3434d6f290f3811a54e7b9f1" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-d72581cf3434d6f290f3811a54e7b9f1" data-bs-parent="#accordion-70a74a02341c5b1a3525fdbeae90071f">
<div class="accordion-body">
<input id="input-619605ae859e20b27715e2849841c5bb" type="text" class="form-control-plaintext" name="bio" value="A very smart guy!" readonly>
</div>
</div>
</div>
</div>