Checks and Radios

options

Checkboxes and radios act as a single input field, but are actually a collection of organized items. Each item is an "option", enumerated into the options parameter. 

@php

$options = ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'];

@endphp

<x-larastrap::checks label="Choose Many" :options="$options" />
<x-larastrap::radios label="Choose One" :options="$options" />

<div class="row mb-3">
  <label for="checks-f1021bef0515abaeb278e0d8a055b077" class="col-4 col-form-label col-4 col-form-label">Choose Many</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="checkbox" class="btn-check" name="[]" id="checks-f1021bef0515abaeb278e0d8a055b077-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="checks-f1021bef0515abaeb278e0d8a055b077-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="[]" id="checks-f1021bef0515abaeb278e0d8a055b077-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="checks-f1021bef0515abaeb278e0d8a055b077-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="[]" id="checks-f1021bef0515abaeb278e0d8a055b077-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-f1021bef0515abaeb278e0d8a055b077-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-3c6349cc299f4f8f7b12e423399ac889" class="col-4 col-form-label col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="UPPu02205S" id="radios-3c6349cc299f4f8f7b12e423399ac889-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="radios-3c6349cc299f4f8f7b12e423399ac889-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" name="UPPu02205S" id="radios-3c6349cc299f4f8f7b12e423399ac889-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="radios-3c6349cc299f4f8f7b12e423399ac889-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" name="UPPu02205S" id="radios-3c6349cc299f4f8f7b12e423399ac889-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="radios-3c6349cc299f4f8f7b12e423399ac889-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>

options can be a simple associative array where keys are the HTML values and values are the related labels. But each value in the options can also be an object, holding a few attributes to better describe each item. Among them:

  • label - the label to display
  • id - an optional ID to identify the option in the DOM
  • disabled - set true if the option is not selectable
  • hidden - set true to skip rendering of the label but still keep the option within the page. This can be useful to handle some extra option through Javascript
  • button_classes - CSS classes to be added to the button
  • button_attributes - associative array of HTML attributes to be assigned to the button
@php

$options = [
    'first' => (object) [
        'label' => 'First',
        'id' => 'first',
    ],
    'second' => (object) [
        'label' => 'Second',
        'disabled' => true,
    ],
    'third' => (object) [
        'label' => 'Third',
        'button_attributes' => ['data-bs-toggle' => 'tooltip', 'data-bs-title' => 'Sample tooltip'],
    ],
    'fourth' => (object) [
        'label' => 'Fourth',
        'hidden' => true,
    ],
    'fifth' => (object) [
        'label' => 'Fifth',
        'button_classes' => ['text-white', 'btn-danger'],
    ],
];

@endphp

<x-larastrap::checks label="Choose Many" :options="$options" />
<x-larastrap::radios label="Choose One" :options="$options" />

<div class="row mb-3">
  <label for="checks-1dafd8101239a6ba25c9970ce72741d9" class="col-4 col-form-label col-4 col-form-label">Choose Many</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="checkbox" class="btn-check" name="[]" id="first" autocomplete="off" value="first"> <label class="btn btn-outline-primary" for="first">First</label> <input type="checkbox" class="btn-check" name="[]" id="checks-1dafd8101239a6ba25c9970ce72741d9-c22cf8376b1893dcfcef0649fe1a7d87" autocomplete="off" value="second"> <label class="btn btn-outline-primary disabled" for="checks-1dafd8101239a6ba25c9970ce72741d9-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="checkbox" class="btn-check" name="[]" id="checks-1dafd8101239a6ba25c9970ce72741d9-168909c0b6f1dfbd48f679d47059c1d6" autocomplete="off" value="third"> <label class="btn btn-outline-primary" for="checks-1dafd8101239a6ba25c9970ce72741d9-168909c0b6f1dfbd48f679d47059c1d6" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Third</label> <input type="checkbox" class="btn-check" name="[]" id="checks-1dafd8101239a6ba25c9970ce72741d9-6e599f7a2a9186d391be4537f105be98" autocomplete="off" value="fourth"> <input type="checkbox" class="btn-check" name="[]" id="checks-1dafd8101239a6ba25c9970ce72741d9-0abdfd715970bd0ef7d5574daa0e6d0b" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary text-white btn-danger" for="checks-1dafd8101239a6ba25c9970ce72741d9-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-7e47e3e87f347d79ee976420f6e9676c" class="col-4 col-form-label col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="1ForxxP5AU" id="first" autocomplete="off" value="first"> <label class="btn btn-outline-primary" for="first">First</label> <input type="radio" class="btn-check" name="1ForxxP5AU" id="radios-7e47e3e87f347d79ee976420f6e9676c-c22cf8376b1893dcfcef0649fe1a7d87" autocomplete="off" value="second"> <label class="btn btn-outline-primary disabled" for="radios-7e47e3e87f347d79ee976420f6e9676c-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="radio" class="btn-check" name="1ForxxP5AU" id="radios-7e47e3e87f347d79ee976420f6e9676c-168909c0b6f1dfbd48f679d47059c1d6" autocomplete="off" value="third"> <label class="btn btn-outline-primary" for="radios-7e47e3e87f347d79ee976420f6e9676c-168909c0b6f1dfbd48f679d47059c1d6" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Third</label> <input type="radio" class="btn-check" name="1ForxxP5AU" id="radios-7e47e3e87f347d79ee976420f6e9676c-6e599f7a2a9186d391be4537f105be98" autocomplete="off" value="fourth"> <input type="radio" class="btn-check" name="1ForxxP5AU" id="radios-7e47e3e87f347d79ee976420f6e9676c-0abdfd715970bd0ef7d5574daa0e6d0b" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary text-white btn-danger" for="radios-7e47e3e87f347d79ee976420f6e9676c-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label>
    </div>
  </div>
</div>

As Lists

x-larastrap::checklist and x-larastrap::radiolist are alternative components, where options are rappresented as horizontal rows instead of a x-larastrap::btngroup . 

@php

$options = ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'];

@endphp

<x-larastrap::radiolist label="Choose One" :options="$options" />
<x-larastrap::checklist label="Choose Many" :options="$options" />

<div class="row mb-3">
  <label for="radiolist-06c7e5fdc4a801c5588224ef72d49308" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="RtDZKJMcjO" id="radiolist-06c7e5fdc4a801c5588224ef72d49308-ee38e4d5dd68c4e440825018d549cb47" value="red"> <label class="form-check-label" for="radiolist-06c7e5fdc4a801c5588224ef72d49308-ee38e4d5dd68c4e440825018d549cb47">Red</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="RtDZKJMcjO" id="radiolist-06c7e5fdc4a801c5588224ef72d49308-d382816a3cbeed082c9e216e7392eed1" value="green"> <label class="form-check-label" for="radiolist-06c7e5fdc4a801c5588224ef72d49308-d382816a3cbeed082c9e216e7392eed1">Green</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="RtDZKJMcjO" id="radiolist-06c7e5fdc4a801c5588224ef72d49308-9594eec95be70e7b1710f730fdda33d9" value="blue"> <label class="form-check-label" for="radiolist-06c7e5fdc4a801c5588224ef72d49308-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-32e6b849a9a1bc46a7934cd606d9036b" class="col-4 col-form-label">Choose Many</label>
  <div class="col-8">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="[]" id="checklist-32e6b849a9a1bc46a7934cd606d9036b-ee38e4d5dd68c4e440825018d549cb47" value="red"> <label class="form-check-label" for="checklist-32e6b849a9a1bc46a7934cd606d9036b-ee38e4d5dd68c4e440825018d549cb47">Red</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="[]" id="checklist-32e6b849a9a1bc46a7934cd606d9036b-d382816a3cbeed082c9e216e7392eed1" value="green"> <label class="form-check-label" for="checklist-32e6b849a9a1bc46a7934cd606d9036b-d382816a3cbeed082c9e216e7392eed1">Green</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="[]" id="checklist-32e6b849a9a1bc46a7934cd606d9036b-9594eec95be70e7b1710f730fdda33d9" value="blue"> <label class="form-check-label" for="checklist-32e6b849a9a1bc46a7934cd606d9036b-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>

With Models

Other variants permit to use objects (eventually: Eloquent models) as options within a checks list or radio buttons set. Those are

  • x-larastrap::checks-model
  • x-larastrap::radios-model
  • x-larastrap::checklist-model
  • x-larastrap::radiolist-model 
@php

$users = App\Models\User::inRandomOrder()->take(3)->get();

@endphp

<x-larastrap::radios-model label="Select a User" :options="$users" />
<x-larastrap::checks-model label="Select Many Users" :options="$users" />
<x-larastrap::radiolist-model label="Select a User" :options="$users" />
<x-larastrap::checklist-model label="Select Many Users" :options="$users" />

<div class="row mb-3">
  <label for="radios-c9104325d3f236fb52a4aa4144c0bd37" class="col-4 col-form-label col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="TUBfmdzBlE" id="radios-c9104325d3f236fb52a4aa4144c0bd37-218711070b310b3ed0c9153acec8cb68" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="radios-c9104325d3f236fb52a4aa4144c0bd37-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label> <input type="radio" class="btn-check" name="TUBfmdzBlE" id="radios-c9104325d3f236fb52a4aa4144c0bd37-85620ea94cfa584cd2d7de970e07f91c" autocomplete="off" value="3"> <label class="btn btn-outline-primary" for="radios-c9104325d3f236fb52a4aa4144c0bd37-85620ea94cfa584cd2d7de970e07f91c">Dr. Darrin Hamill</label> <input type="radio" class="btn-check" name="TUBfmdzBlE" id="radios-c9104325d3f236fb52a4aa4144c0bd37-53104404aa0e6a2086f4c8e3554bb287" autocomplete="off" value="6"> <label class="btn btn-outline-primary" for="radios-c9104325d3f236fb52a4aa4144c0bd37-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checks-c0fcf05bb12983659a76a9e39ac50698" class="col-4 col-form-label col-4 col-form-label">Select Many Users</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="checkbox" class="btn-check" name="[]" id="checks-c0fcf05bb12983659a76a9e39ac50698-218711070b310b3ed0c9153acec8cb68" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="checks-c0fcf05bb12983659a76a9e39ac50698-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label> <input type="checkbox" class="btn-check" name="[]" id="checks-c0fcf05bb12983659a76a9e39ac50698-85620ea94cfa584cd2d7de970e07f91c" autocomplete="off" value="3"> <label class="btn btn-outline-primary" for="checks-c0fcf05bb12983659a76a9e39ac50698-85620ea94cfa584cd2d7de970e07f91c">Dr. Darrin Hamill</label> <input type="checkbox" class="btn-check" name="[]" id="checks-c0fcf05bb12983659a76a9e39ac50698-53104404aa0e6a2086f4c8e3554bb287" autocomplete="off" value="6"> <label class="btn btn-outline-primary" for="checks-c0fcf05bb12983659a76a9e39ac50698-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radiolist-9f09ce2d10e6ab1e69792aca08163a85" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="zTkVLpYM64" id="radiolist-9f09ce2d10e6ab1e69792aca08163a85-218711070b310b3ed0c9153acec8cb68" value="2"> <label class="form-check-label" for="radiolist-9f09ce2d10e6ab1e69792aca08163a85-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="zTkVLpYM64" id="radiolist-9f09ce2d10e6ab1e69792aca08163a85-85620ea94cfa584cd2d7de970e07f91c" value="3"> <label class="form-check-label" for="radiolist-9f09ce2d10e6ab1e69792aca08163a85-85620ea94cfa584cd2d7de970e07f91c">Dr. Darrin Hamill</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="zTkVLpYM64" id="radiolist-9f09ce2d10e6ab1e69792aca08163a85-53104404aa0e6a2086f4c8e3554bb287" value="6"> <label class="form-check-label" for="radiolist-9f09ce2d10e6ab1e69792aca08163a85-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-2091fd0a6f75bb90a8101bc1c5e42cba" class="col-4 col-form-label">Select Many Users</label>
  <div class="col-8">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="[]" id="checklist-2091fd0a6f75bb90a8101bc1c5e42cba-218711070b310b3ed0c9153acec8cb68" value="2"> <label class="form-check-label" for="checklist-2091fd0a6f75bb90a8101bc1c5e42cba-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="[]" id="checklist-2091fd0a6f75bb90a8101bc1c5e42cba-85620ea94cfa584cd2d7de970e07f91c" value="3"> <label class="form-check-label" for="checklist-2091fd0a6f75bb90a8101bc1c5e42cba-85620ea94cfa584cd2d7de970e07f91c">Dr. Darrin Hamill</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="[]" id="checklist-2091fd0a6f75bb90a8101bc1c5e42cba-53104404aa0e6a2086f4c8e3554bb287" value="6"> <label class="form-check-label" for="checklist-2091fd0a6f75bb90a8101bc1c5e42cba-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
    </div>
  </div>
</div>

The -model variants are able to set their own value accordingly to the Eloquent relationships of the reference entity (the one assigned as obj of the parent x-larastrap::form ), as long as their name matches the attribute to which the relationship itself is exposed. 

@php

// In this example, the User model has a "boss" relationship defined as
//
// public function boss()
// {
//     return $this->belongsTo(User::class);
// }
//
// and a "friends" relationship defined as
//
// public function friends()
// {
//     return $this->belongsToMany(User::class);
// }

$ref = App\Models\User::has('boss')->inRandomOrder()->first();
$bosses = App\Models\User::doesntHave('boss')->orderBy('name', 'asc')->get();
$users = App\Models\User::orderBy('name', 'asc')->get();

@endphp

<x-larastrap::form :obj="$ref">
    <x-larastrap::radios-model name="boss" :label="sprintf('Select a Boss for %s', $ref->name)" :options="$bosses" />
    <x-larastrap::checklist-model name="friends" :label="sprintf('Select friends of %s', $ref->name)" :options="$users" />
</x-larastrap::form>

<form id="form-68d30a9594728bc39aa24be94b319d21" class="" method="post" name="form-68d30a9594728bc39aa24be94b319d21">
  <input type="hidden" name="_token" value="wFRn0ZHiUdNxSMmClzBwGUpJHf2Eh7JJqNvCywpI">
  <div class="row mb-3">
    <label for="radios-ef910bb052f25ef3b42d92811e7ecb29" class="col-4 col-form-label col-4 col-form-label">Select a Boss for Dr. Darrin Hamill</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="boss" id="radios-ef910bb052f25ef3b42d92811e7ecb29-0baa4bc5b018acf635cb12e812bea244" autocomplete="off" value="7"> <label class="btn btn-outline-primary" for="radios-ef910bb052f25ef3b42d92811e7ecb29-0baa4bc5b018acf635cb12e812bea244">Amaya Beer</label> <input type="radio" class="btn-check" name="boss" id="radios-ef910bb052f25ef3b42d92811e7ecb29-c9e46a9f63a408e8ceea4a9786acc0b8" autocomplete="off" value="9"> <label class="btn btn-outline-primary" for="radios-ef910bb052f25ef3b42d92811e7ecb29-c9e46a9f63a408e8ceea4a9786acc0b8">Carolyne Bradtke</label> <input type="radio" class="btn-check" name="boss" id="radios-ef910bb052f25ef3b42d92811e7ecb29-972db9ba6ce3ee53cf3313b79593e937" autocomplete="off" value="10"> <label class="btn btn-outline-primary" for="radios-ef910bb052f25ef3b42d92811e7ecb29-972db9ba6ce3ee53cf3313b79593e937">Dr. Gardner Medhurst</label> <input type="radio" class="btn-check" name="boss" id="radios-ef910bb052f25ef3b42d92811e7ecb29-53104404aa0e6a2086f4c8e3554bb287" autocomplete="off" value="6"> <label class="btn btn-outline-primary" for="radios-ef910bb052f25ef3b42d92811e7ecb29-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label> <input type="radio" class="btn-check" name="boss" id="radios-ef910bb052f25ef3b42d92811e7ecb29-21f6586462220d0f798d3db1a00afce4" autocomplete="off" value="8" checked> <label class="btn btn-outline-primary" for="radios-ef910bb052f25ef3b42d92811e7ecb29-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04" class="col-4 col-form-label">Select friends of Dr. Darrin Hamill</label>
    <div class="col-8">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-3f51aa5990b818921059a68ad0efc32f" value="4" checked> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-3f51aa5990b818921059a68ad0efc32f">Aiden Osinski</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-0baa4bc5b018acf635cb12e812bea244" value="7"> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-0baa4bc5b018acf635cb12e812bea244">Amaya Beer</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-c9e46a9f63a408e8ceea4a9786acc0b8" value="9"> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-c9e46a9f63a408e8ceea4a9786acc0b8">Carolyne Bradtke</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-85620ea94cfa584cd2d7de970e07f91c" value="3"> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-85620ea94cfa584cd2d7de970e07f91c">Dr. Darrin Hamill</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-972db9ba6ce3ee53cf3313b79593e937" value="10" checked> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-972db9ba6ce3ee53cf3313b79593e937">Dr. Gardner Medhurst</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-53104404aa0e6a2086f4c8e3554bb287" value="6" checked> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-21f6586462220d0f798d3db1a00afce4" value="8"> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-9e28615787830d2372846c8d264e608a" value="5"> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-9e28615787830d2372846c8d264e608a">Mr. Cyril Adams</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-218711070b310b3ed0c9153acec8cb68" value="2" checked> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-24f662cef6848793fb8116a0138de356" value="1" checked> <label class="form-check-label" for="checklist-9f8bf9fa3e2b18d960aa6981a6bc9f04-24f662cef6848793fb8116a0138de356">Prof. Ethan Schmitt III</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-70879cc7763d5a7321057e571da53b8c" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

For -model variants it is assumed that models into the options collection have an "id" and a "name" attribute to be used (respectively: as the value and the label of each item).

If your models have a different structure, or you want to display different labels, it is possible to pass a translateCallback parameter with a function to translate your actual content: it has to accept a parameter (the model to be translated) and must return an array with two elements (the value and the label of the final selectable option). 

@php

$users = App\Models\User::inRandomOrder()->take(3)->get();
$translate = fn($obj) => [$obj->id, $obj->email];

@endphp

<x-larastrap::radiolist-model label="Select a User" :options="$users" :translateCallback="$translate" />

<div class="row mb-3">
  <label for="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="WYRGmQgK8G" id="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec-4ca7027f3f6d7b8cf9add7f296a180f4" value="10"> <label class="form-check-label" for="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec-4ca7027f3f6d7b8cf9add7f296a180f4">pokon@example.com</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="WYRGmQgK8G" id="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec-39c50e2f4feed39ede6f6a72479004da" value="4"> <label class="form-check-label" for="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec-39c50e2f4feed39ede6f6a72479004da">estel.barrows@example.org</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="WYRGmQgK8G" id="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec-e78127fc143b026045776087ed0750b0" value="9"> <label class="form-check-label" for="radiolist-3fe17e06ed0cf2164a825bbdae2f4bec-e78127fc143b026045776087ed0750b0">wisoky.dax@example.org</label>
    </div>
  </div>
</div>

The -model variants have also an extra_options parameter to define other options aside those collected in the options . This is useful to add a "void" item to be choosen by the user. 

@php

$users = App\Models\User::inRandomOrder()->take(3)->get();

@endphp

<x-larastrap::radios-model label="Select a User" :options="$users" :extra_options="[0 => 'None']" value="0" />

<div class="row mb-3">
  <label for="radios-efa6d5d5a18337392acbcab3273529fb" class="col-4 col-form-label col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="NwQlFuxmYs" id="radios-efa6d5d5a18337392acbcab3273529fb-6adf97f83acf6453d4a6a4b1070f3754" autocomplete="off" value="0" checked> <label class="btn btn-outline-primary" for="radios-efa6d5d5a18337392acbcab3273529fb-6adf97f83acf6453d4a6a4b1070f3754">None</label> <input type="radio" class="btn-check" name="NwQlFuxmYs" id="radios-efa6d5d5a18337392acbcab3273529fb-0baa4bc5b018acf635cb12e812bea244" autocomplete="off" value="7"> <label class="btn btn-outline-primary" for="radios-efa6d5d5a18337392acbcab3273529fb-0baa4bc5b018acf635cb12e812bea244">Amaya Beer</label> <input type="radio" class="btn-check" name="NwQlFuxmYs" id="radios-efa6d5d5a18337392acbcab3273529fb-21f6586462220d0f798d3db1a00afce4" autocomplete="off" value="8"> <label class="btn btn-outline-primary" for="radios-efa6d5d5a18337392acbcab3273529fb-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label> <input type="radio" class="btn-check" name="NwQlFuxmYs" id="radios-efa6d5d5a18337392acbcab3273529fb-c9e46a9f63a408e8ceea4a9786acc0b8" autocomplete="off" value="9"> <label class="btn btn-outline-primary" for="radios-efa6d5d5a18337392acbcab3273529fb-c9e46a9f63a408e8ceea4a9786acc0b8">Carolyne Bradtke</label>
    </div>
  </div>
</div>

Larastrap

info@madbob.org

gitlab.com/madbob/larastrap

powered by MAD

PayPal Donation