Checks and Radios

options

x-larastrap::checks and x-larastrap::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-ccea029755487b0e50d911f8da6f887d" class="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-ccea029755487b0e50d911f8da6f887d-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="checks-ccea029755487b0e50d911f8da6f887d-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="[]" id="checks-ccea029755487b0e50d911f8da6f887d-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="checks-ccea029755487b0e50d911f8da6f887d-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="[]" id="checks-ccea029755487b0e50d911f8da6f887d-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-ccea029755487b0e50d911f8da6f887d-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-4e2d3648661a07bc3b6018226cee5f42" class="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="5cLiDCVrpy" id="radios-4e2d3648661a07bc3b6018226cee5f42-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="radios-4e2d3648661a07bc3b6018226cee5f42-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" name="5cLiDCVrpy" id="radios-4e2d3648661a07bc3b6018226cee5f42-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="radios-4e2d3648661a07bc3b6018226cee5f42-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" name="5cLiDCVrpy" id="radios-4e2d3648661a07bc3b6018226cee5f42-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="radios-4e2d3648661a07bc3b6018226cee5f42-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. Please note: if you specify an ID, it is up to you to grant it is unique within the current page
  • 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',
        // This is intentionally broken, as the radio button will change the
        // checkbox having the same ID (as the $options array is here used to
        // init both components)
        // Be aware of IDs you assign!
        '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-bab52dc8bf135ec7acb1e62993e437d8" class="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-bab52dc8bf135ec7acb1e62993e437d8-c22cf8376b1893dcfcef0649fe1a7d87" autocomplete="off" value="second"> <label class="btn btn-outline-primary disabled" for="checks-bab52dc8bf135ec7acb1e62993e437d8-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="checkbox" class="btn-check" name="[]" id="checks-bab52dc8bf135ec7acb1e62993e437d8-168909c0b6f1dfbd48f679d47059c1d6" autocomplete="off" value="third"> <label class="btn btn-outline-primary" for="checks-bab52dc8bf135ec7acb1e62993e437d8-168909c0b6f1dfbd48f679d47059c1d6" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Third</label> <input type="checkbox" class="btn-check" name="[]" id="checks-bab52dc8bf135ec7acb1e62993e437d8-6e599f7a2a9186d391be4537f105be98" autocomplete="off" value="fourth"> <input type="checkbox" class="btn-check" name="[]" id="checks-bab52dc8bf135ec7acb1e62993e437d8-0abdfd715970bd0ef7d5574daa0e6d0b" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary text-white btn-danger" for="checks-bab52dc8bf135ec7acb1e62993e437d8-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-5c43d8da4b58b9dee08216863fde5f7b" class="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="0rpNAL7O2c" id="first" autocomplete="off" value="first"> <label class="btn btn-outline-primary" for="first">First</label> <input type="radio" class="btn-check" name="0rpNAL7O2c" id="radios-5c43d8da4b58b9dee08216863fde5f7b-c22cf8376b1893dcfcef0649fe1a7d87" autocomplete="off" value="second"> <label class="btn btn-outline-primary disabled" for="radios-5c43d8da4b58b9dee08216863fde5f7b-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="radio" class="btn-check" name="0rpNAL7O2c" id="radios-5c43d8da4b58b9dee08216863fde5f7b-168909c0b6f1dfbd48f679d47059c1d6" autocomplete="off" value="third"> <label class="btn btn-outline-primary" for="radios-5c43d8da4b58b9dee08216863fde5f7b-168909c0b6f1dfbd48f679d47059c1d6" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Third</label> <input type="radio" class="btn-check" name="0rpNAL7O2c" id="radios-5c43d8da4b58b9dee08216863fde5f7b-6e599f7a2a9186d391be4537f105be98" autocomplete="off" value="fourth"> <input type="radio" class="btn-check" name="0rpNAL7O2c" id="radios-5c43d8da4b58b9dee08216863fde5f7b-0abdfd715970bd0ef7d5574daa0e6d0b" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary text-white btn-danger" for="radios-5c43d8da4b58b9dee08216863fde5f7b-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-53f2a6fa0005912d2249ab330ca416da" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <div class="form-control-plaintext">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="2y7X3pEJtk" id="radiolist-53f2a6fa0005912d2249ab330ca416da-ee38e4d5dd68c4e440825018d549cb47" value="red"> <label class="form-check-label" for="radiolist-53f2a6fa0005912d2249ab330ca416da-ee38e4d5dd68c4e440825018d549cb47">Red</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="2y7X3pEJtk" id="radiolist-53f2a6fa0005912d2249ab330ca416da-d382816a3cbeed082c9e216e7392eed1" value="green"> <label class="form-check-label" for="radiolist-53f2a6fa0005912d2249ab330ca416da-d382816a3cbeed082c9e216e7392eed1">Green</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="2y7X3pEJtk" id="radiolist-53f2a6fa0005912d2249ab330ca416da-9594eec95be70e7b1710f730fdda33d9" value="blue"> <label class="form-check-label" for="radiolist-53f2a6fa0005912d2249ab330ca416da-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-fca0772c6293f9bfb31fec1641900b98" class="col-4 col-form-label">Choose Many</label>
  <div class="col-8">
    <div class="form-control-plaintext">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-fca0772c6293f9bfb31fec1641900b98-ee38e4d5dd68c4e440825018d549cb47" value="red"> <label class="form-check-label" for="checklist-fca0772c6293f9bfb31fec1641900b98-ee38e4d5dd68c4e440825018d549cb47">Red</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-fca0772c6293f9bfb31fec1641900b98-d382816a3cbeed082c9e216e7392eed1" value="green"> <label class="form-check-label" for="checklist-fca0772c6293f9bfb31fec1641900b98-d382816a3cbeed082c9e216e7392eed1">Green</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-fca0772c6293f9bfb31fec1641900b98-9594eec95be70e7b1710f730fdda33d9" value="blue"> <label class="form-check-label" for="checklist-fca0772c6293f9bfb31fec1641900b98-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </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-f75371cd7ecc35022a71f5a62ad8981c" class="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="L9jxEgM7eT" id="radios-f75371cd7ecc35022a71f5a62ad8981c-53104404aa0e6a2086f4c8e3554bb287" autocomplete="off" value="6"> <label class="btn btn-outline-primary" for="radios-f75371cd7ecc35022a71f5a62ad8981c-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label> <input type="radio" class="btn-check" name="L9jxEgM7eT" id="radios-f75371cd7ecc35022a71f5a62ad8981c-21f6586462220d0f798d3db1a00afce4" autocomplete="off" value="8"> <label class="btn btn-outline-primary" for="radios-f75371cd7ecc35022a71f5a62ad8981c-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label> <input type="radio" class="btn-check" name="L9jxEgM7eT" id="radios-f75371cd7ecc35022a71f5a62ad8981c-218711070b310b3ed0c9153acec8cb68" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="radios-f75371cd7ecc35022a71f5a62ad8981c-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checks-d924ddf13e56e169fe4dd3390fd21982" class="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-d924ddf13e56e169fe4dd3390fd21982-53104404aa0e6a2086f4c8e3554bb287" autocomplete="off" value="6"> <label class="btn btn-outline-primary" for="checks-d924ddf13e56e169fe4dd3390fd21982-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label> <input type="checkbox" class="btn-check" name="[]" id="checks-d924ddf13e56e169fe4dd3390fd21982-21f6586462220d0f798d3db1a00afce4" autocomplete="off" value="8"> <label class="btn btn-outline-primary" for="checks-d924ddf13e56e169fe4dd3390fd21982-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label> <input type="checkbox" class="btn-check" name="[]" id="checks-d924ddf13e56e169fe4dd3390fd21982-218711070b310b3ed0c9153acec8cb68" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="checks-d924ddf13e56e169fe4dd3390fd21982-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radiolist-853c2a152b77ba82716a38d6d22c4a26" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div class="form-control-plaintext">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="obVST06ACP" id="radiolist-853c2a152b77ba82716a38d6d22c4a26-53104404aa0e6a2086f4c8e3554bb287" value="6"> <label class="form-check-label" for="radiolist-853c2a152b77ba82716a38d6d22c4a26-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="obVST06ACP" id="radiolist-853c2a152b77ba82716a38d6d22c4a26-21f6586462220d0f798d3db1a00afce4" value="8"> <label class="form-check-label" for="radiolist-853c2a152b77ba82716a38d6d22c4a26-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="obVST06ACP" id="radiolist-853c2a152b77ba82716a38d6d22c4a26-218711070b310b3ed0c9153acec8cb68" value="2"> <label class="form-check-label" for="radiolist-853c2a152b77ba82716a38d6d22c4a26-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-4878a7af3c75378a7d94bff69d16ab33" class="col-4 col-form-label">Select Many Users</label>
  <div class="col-8">
    <div class="form-control-plaintext">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-4878a7af3c75378a7d94bff69d16ab33-53104404aa0e6a2086f4c8e3554bb287" value="6"> <label class="form-check-label" for="checklist-4878a7af3c75378a7d94bff69d16ab33-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-4878a7af3c75378a7d94bff69d16ab33-21f6586462220d0f798d3db1a00afce4" value="8"> <label class="form-check-label" for="checklist-4878a7af3c75378a7d94bff69d16ab33-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-4878a7af3c75378a7d94bff69d16ab33-218711070b310b3ed0c9153acec8cb68" value="2"> <label class="form-check-label" for="checklist-4878a7af3c75378a7d94bff69d16ab33-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
      </div>
    </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-a3c65c2974270fd093ee8a9bf8ae7d0b" class="" method="post" name="form-a3c65c2974270fd093ee8a9bf8ae7d0b">
  <input type="hidden" name="_token" value="3M2ZI57o8PLzmYme5FgnLUEOfOCdcITRPmVwviRv">
  <div class="row mb-3">
    <label for="radios-c366046a510287e8815ed3f181afa78d" class="col-4 col-form-label">Select a Boss for Prof. Ethan Schmitt III</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="boss" id="radios-c366046a510287e8815ed3f181afa78d-0baa4bc5b018acf635cb12e812bea244" autocomplete="off" value="7"> <label class="btn btn-outline-primary" for="radios-c366046a510287e8815ed3f181afa78d-0baa4bc5b018acf635cb12e812bea244">Amaya Beer</label> <input type="radio" class="btn-check" name="boss" id="radios-c366046a510287e8815ed3f181afa78d-c9e46a9f63a408e8ceea4a9786acc0b8" autocomplete="off" value="9"> <label class="btn btn-outline-primary" for="radios-c366046a510287e8815ed3f181afa78d-c9e46a9f63a408e8ceea4a9786acc0b8">Carolyne Bradtke</label> <input type="radio" class="btn-check" name="boss" id="radios-c366046a510287e8815ed3f181afa78d-972db9ba6ce3ee53cf3313b79593e937" autocomplete="off" value="10"> <label class="btn btn-outline-primary" for="radios-c366046a510287e8815ed3f181afa78d-972db9ba6ce3ee53cf3313b79593e937">Dr. Gardner Medhurst</label> <input type="radio" class="btn-check" name="boss" id="radios-c366046a510287e8815ed3f181afa78d-53104404aa0e6a2086f4c8e3554bb287" autocomplete="off" value="6" checked> <label class="btn btn-outline-primary" for="radios-c366046a510287e8815ed3f181afa78d-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label> <input type="radio" class="btn-check" name="boss" id="radios-c366046a510287e8815ed3f181afa78d-21f6586462220d0f798d3db1a00afce4" autocomplete="off" value="8"> <label class="btn btn-outline-primary" for="radios-c366046a510287e8815ed3f181afa78d-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checklist-014b398c78e4ba1d44d78e063f27a7db" class="col-4 col-form-label">Select friends of Prof. Ethan Schmitt III</label>
    <div class="col-8">
      <div class="form-control-plaintext">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-3f51aa5990b818921059a68ad0efc32f" value="4"> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-3f51aa5990b818921059a68ad0efc32f">Aiden Osinski</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-0baa4bc5b018acf635cb12e812bea244" value="7" checked> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-0baa4bc5b018acf635cb12e812bea244">Amaya Beer</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-c9e46a9f63a408e8ceea4a9786acc0b8" value="9" checked> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-c9e46a9f63a408e8ceea4a9786acc0b8">Carolyne Bradtke</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-85620ea94cfa584cd2d7de970e07f91c" value="3" checked> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-85620ea94cfa584cd2d7de970e07f91c">Dr. Darrin Hamill</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-972db9ba6ce3ee53cf3313b79593e937" value="10" checked> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-972db9ba6ce3ee53cf3313b79593e937">Dr. Gardner Medhurst</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-53104404aa0e6a2086f4c8e3554bb287" value="6"> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-53104404aa0e6a2086f4c8e3554bb287">Dr. Pasquale Borer IV</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-21f6586462220d0f798d3db1a00afce4" value="8"> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-21f6586462220d0f798d3db1a00afce4">Miss Earnestine Lowe</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-9e28615787830d2372846c8d264e608a" value="5"> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-9e28615787830d2372846c8d264e608a">Mr. Cyril Adams</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-218711070b310b3ed0c9153acec8cb68" value="2" checked> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-014b398c78e4ba1d44d78e063f27a7db-24f662cef6848793fb8116a0138de356" value="1"> <label class="form-check-label" for="checklist-014b398c78e4ba1d44d78e063f27a7db-24f662cef6848793fb8116a0138de356">Prof. Ethan Schmitt III</label>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-483ee6b62d793a75d771251ddc107e80" 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-23f3144d727e5124ade874a92116b12a" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div class="form-control-plaintext">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="zAqGm08U0x" id="radiolist-23f3144d727e5124ade874a92116b12a-e78127fc143b026045776087ed0750b0" value="9"> <label class="form-check-label" for="radiolist-23f3144d727e5124ade874a92116b12a-e78127fc143b026045776087ed0750b0">wisoky.dax@example.org</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="zAqGm08U0x" id="radiolist-23f3144d727e5124ade874a92116b12a-3816d563547e428d17156a3d9ef5f70a" value="1"> <label class="form-check-label" for="radiolist-23f3144d727e5124ade874a92116b12a-3816d563547e428d17156a3d9ef5f70a">ashly77@example.org</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="zAqGm08U0x" id="radiolist-23f3144d727e5124ade874a92116b12a-4770fd3800caf67b438241203c2a6cb6" value="8"> <label class="form-check-label" for="radiolist-23f3144d727e5124ade874a92116b12a-4770fd3800caf67b438241203c2a6cb6">langosh.rosalyn@example.com</label>
      </div>
    </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-cb749995c3d9a5688a6a06d5cc777524" class="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="kYn5dNfOQ7" id="radios-cb749995c3d9a5688a6a06d5cc777524-6adf97f83acf6453d4a6a4b1070f3754" autocomplete="off" value="0" checked> <label class="btn btn-outline-primary" for="radios-cb749995c3d9a5688a6a06d5cc777524-6adf97f83acf6453d4a6a4b1070f3754">None</label> <input type="radio" class="btn-check" name="kYn5dNfOQ7" id="radios-cb749995c3d9a5688a6a06d5cc777524-9e28615787830d2372846c8d264e608a" autocomplete="off" value="5"> <label class="btn btn-outline-primary" for="radios-cb749995c3d9a5688a6a06d5cc777524-9e28615787830d2372846c8d264e608a">Mr. Cyril Adams</label> <input type="radio" class="btn-check" name="kYn5dNfOQ7" id="radios-cb749995c3d9a5688a6a06d5cc777524-3f51aa5990b818921059a68ad0efc32f" autocomplete="off" value="4"> <label class="btn btn-outline-primary" for="radios-cb749995c3d9a5688a6a06d5cc777524-3f51aa5990b818921059a68ad0efc32f">Aiden Osinski</label> <input type="radio" class="btn-check" name="kYn5dNfOQ7" id="radios-cb749995c3d9a5688a6a06d5cc777524-218711070b310b3ed0c9153acec8cb68" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="radios-cb749995c3d9a5688a6a06d5cc777524-218711070b310b3ed0c9153acec8cb68">Mr. Randall Hyatt</label>
    </div>
  </div>
</div>

Larastrap

info@madbob.org

gitlab.com/madbob/larastrap

powered by MAD

PayPal Donation