View on GitLab

Checks and Radios

x-larastrap::check is used for a single checkbox, but many other variants are available. 

<x-larastrap::check label="A Classic Checkbox" />

<div class="row mb-3">
  <label for="check-960ed0691aafac6893918abf4e65d347" class="col-4 col-form-label">A Classic Checkbox</label>
  <div class="col-8">
    <div class="form-check mt-1">
      <input id="check-960ed0691aafac6893918abf4e65d347" type="checkbox" class="form-check-input" name="Fw3ocl4CPK">
    </div>
  </div>
</div>

switch

Adding the switch parameter to a single x-larastrap::check element, it will be presented as a Bootstrap switch. 

<x-larastrap::check switch label="A Switch" />

<div class="row mb-3">
  <label for="check-013e7ccb1d9e0c7e74a009e6e183af0b" class="col-4 col-form-label">A Switch</label>
  <div class="col-8">
    <div class="form-check form-switch mt-1">
      <input id="check-013e7ccb1d9e0c7e74a009e6e183af0b" type="checkbox" class="form-check-input" name="sA9DTZ6ZxR">
    </div>
  </div>
</div>

inline

The inline parameter is useful to alter the layout of the checkbox component.

By default x-larastrap::check is handled as any other Input element (the position of label and input are determined by the parent Form formview ), while inline groups the label with the actual checkbox for a more classic visualization.

Horizontal form, non-inline checkbox
Vertical form, non-inline checkbox
Horizontal form, inline checkbox
Horizontal form, inline checkbox aligned to the beginning
Vertical form, inline checkbox
<x-larastrap::form formview="horizontal">
    <div class="alert alert-info">Horizontal form, non-inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Non-Inline Check" />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="vertical">
    <div class="alert alert-info">Vertical form, non-inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Non-Inline Check" />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="horizontal">
    <div class="alert alert-info">Horizontal form, inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Inline Check" inline />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="horizontal">
    <div class="alert alert-info">Horizontal form, inline checkbox aligned to the beginning</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Inline Check" inline do_label="hide" />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="vertical">
    <div class="alert alert-info">Vertical form, inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Inline Check" inline />
</x-larastrap::form>

<form id="form-6f4922f45568161a8cdf4ad2299f6d23" class="" method="post" name="form-6f4922f45568161a8cdf4ad2299f6d23">
  <input type="hidden" name="_token" value="CXzih5S9qTv8vr2HWTGotKxPodDISjeOZTTkXXC9" autocomplete="off">
  <div class="alert alert-info">
    Horizontal form, non-inline checkbox
  </div>
  <div class="row mb-3">
    <label for="input-2e1cc4accbf13adb0a8ad3ce1912c9f8" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-2e1cc4accbf13adb0a8ad3ce1912c9f8" type="text" class="form-control" name="qXsZmXE8Dt" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-5bb4929c0073a4d01950df437f7808c8" class="col-4 col-form-label">Non-Inline Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-5bb4929c0073a4d01950df437f7808c8" type="checkbox" class="form-check-input" name="BCwEg89Srv">
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-222102cb808243971bd4c33dd2a51752" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-4e732ced3463d06de0ca9a15b6153677" class="" method="post" name="form-4e732ced3463d06de0ca9a15b6153677">
  <input type="hidden" name="_token" value="CXzih5S9qTv8vr2HWTGotKxPodDISjeOZTTkXXC9" autocomplete="off">
  <div class="alert alert-info">
    Vertical form, non-inline checkbox
  </div>
  <div class="mb-3">
    <label for="input-0c6928d0eaf67643a72b069047ac0816" class="form-label">Reference Text</label> <input id="input-0c6928d0eaf67643a72b069047ac0816" type="text" class="form-control" name="GhZDTxsA6t" value="">
  </div>
  <div class="mb-3">
    <label for="check-5efc64ff3ce1d38851a9817e76214591" class="form-label">Non-Inline Check</label>
    <div class="form-check mt-1">
      <input id="check-5efc64ff3ce1d38851a9817e76214591" type="checkbox" class="form-check-input" name="dK5XiAIjmn">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-ad6f1229433e02e545b9b598df61ed42" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-e369853df766fa44e1ed0ff613f563bd" class="" method="post" name="form-e369853df766fa44e1ed0ff613f563bd">
  <input type="hidden" name="_token" value="CXzih5S9qTv8vr2HWTGotKxPodDISjeOZTTkXXC9" autocomplete="off">
  <div class="alert alert-info">
    Horizontal form, inline checkbox
  </div>
  <div class="row mb-3">
    <label for="input-42979af871a76af5832513e92eec0da7" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-42979af871a76af5832513e92eec0da7" type="text" class="form-control" name="sIVhQq9ZAG" value="">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-8228aae519895cec37c7111d37733cb9" type="checkbox" class="form-check-input" name="wphEI7XB30"> <label for="check-8228aae519895cec37c7111d37733cb9" class="">Inline Check</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-802f32930e5aff0e56f8bb90be191387" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-17e62166fc8586dfa4d1bc0e1742c08b" class="" method="post" name="form-17e62166fc8586dfa4d1bc0e1742c08b">
  <input type="hidden" name="_token" value="CXzih5S9qTv8vr2HWTGotKxPodDISjeOZTTkXXC9" autocomplete="off">
  <div class="alert alert-info">
    Horizontal form, inline checkbox aligned to the beginning
  </div>
  <div class="row mb-3">
    <label for="input-9150c3e87197612f44b21167ccf3b1db" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-9150c3e87197612f44b21167ccf3b1db" type="text" class="form-control" name="TIR3QE9P8M" value="">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-32875bf6a2dc3f7e4dd005dc081398cd" type="checkbox" class="form-check-input" name="5Pv9CIDFJk"> <label for="check-32875bf6a2dc3f7e4dd005dc081398cd" class="">Inline Check</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-cb220d667c9086fc1146cfac55d4637c" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-2838023a778dfaecdc212708f721b788" class="" method="post" name="form-2838023a778dfaecdc212708f721b788">
  <input type="hidden" name="_token" value="CXzih5S9qTv8vr2HWTGotKxPodDISjeOZTTkXXC9" autocomplete="off">
  <div class="alert alert-info">
    Vertical form, inline checkbox
  </div>
  <div class="mb-3">
    <label for="input-16b35e176f220d5d2b78cb5ccbf911df" class="form-label">Reference Text</label> <input id="input-16b35e176f220d5d2b78cb5ccbf911df" type="text" class="form-control" name="kxfMIQse6J" value="">
  </div>
  <div class="mb-3">
    <div class="form-check mt-1">
      <input id="check-018926ca08d69ddabc6e0340e8f3d656" type="checkbox" class="form-check-input" name="Y2fEyR7Glf"> <label for="check-018926ca08d69ddabc6e0340e8f3d656" class="">Inline Check</label>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-b10d50b908b0ae004b8dde654b090a60" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

As per any other Larastrap parameter, for all elements, if you want to use the inline layout by default you can enforce it once in your configuration file. 

<?php

return [
    'elements' => [
        'check' => [
            'inline' => true,
        ],
    ],
];

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-7345bdc22c7b8c6ea44004ae065889e7" 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-7345bdc22c7b8c6ea44004ae065889e7-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="checks-7345bdc22c7b8c6ea44004ae065889e7-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="[]" id="checks-7345bdc22c7b8c6ea44004ae065889e7-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="checks-7345bdc22c7b8c6ea44004ae065889e7-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="[]" id="checks-7345bdc22c7b8c6ea44004ae065889e7-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-7345bdc22c7b8c6ea44004ae065889e7-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-7416e4a6cef96118fde13ed82b1cdbca" 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="xkQsa6e2Lp" id="radios-7416e4a6cef96118fde13ed82b1cdbca-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="radios-7416e4a6cef96118fde13ed82b1cdbca-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" name="xkQsa6e2Lp" id="radios-7416e4a6cef96118fde13ed82b1cdbca-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="radios-7416e4a6cef96118fde13ed82b1cdbca-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" name="xkQsa6e2Lp" id="radios-7416e4a6cef96118fde13ed82b1cdbca-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="radios-7416e4a6cef96118fde13ed82b1cdbca-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
  • label_html - alternative to label, to enforce an HTML content
  • tlabel - alternative to label, contains an identifier for native translations
  • 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'],
    ],
    'sixth' => (object) [
        'label_html' => '<s>Sixth</s>',
    ],
];

@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-2381618853985a128be2aae88bddfaef" 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-2381618853985a128be2aae88bddfaef-c22cf8376b1893dcfcef0649fe1a7d87" autocomplete="off" value="second"> <label class="btn btn-outline-primary disabled" for="checks-2381618853985a128be2aae88bddfaef-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="checkbox" class="btn-check" name="[]" id="checks-2381618853985a128be2aae88bddfaef-168909c0b6f1dfbd48f679d47059c1d6" autocomplete="off" value="third"> <label class="btn btn-outline-primary" for="checks-2381618853985a128be2aae88bddfaef-168909c0b6f1dfbd48f679d47059c1d6" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Third</label> <input type="checkbox" class="btn-check" name="[]" id="checks-2381618853985a128be2aae88bddfaef-6e599f7a2a9186d391be4537f105be98" autocomplete="off" value="fourth"> <input type="checkbox" class="btn-check" name="[]" id="checks-2381618853985a128be2aae88bddfaef-0abdfd715970bd0ef7d5574daa0e6d0b" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary text-white btn-danger" for="checks-2381618853985a128be2aae88bddfaef-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label> <input type="checkbox" class="btn-check" name="[]" id="checks-2381618853985a128be2aae88bddfaef-04748e061c66b41433e6aa521c542811" autocomplete="off" value="sixth"> <label class="btn btn-outline-primary" for="checks-2381618853985a128be2aae88bddfaef-04748e061c66b41433e6aa521c542811"><s>Sixth</s></label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-d41b6a6ca7cf1a70dff9b31c85dbf369" 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="oqTBNB8fVJ" id="first" autocomplete="off" value="first"> <label class="btn btn-outline-primary" for="first">First</label> <input type="radio" class="btn-check" name="oqTBNB8fVJ" id="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-c22cf8376b1893dcfcef0649fe1a7d87" autocomplete="off" value="second"> <label class="btn btn-outline-primary disabled" for="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="radio" class="btn-check" name="oqTBNB8fVJ" id="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-168909c0b6f1dfbd48f679d47059c1d6" autocomplete="off" value="third"> <label class="btn btn-outline-primary" for="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-168909c0b6f1dfbd48f679d47059c1d6" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Third</label> <input type="radio" class="btn-check" name="oqTBNB8fVJ" id="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-6e599f7a2a9186d391be4537f105be98" autocomplete="off" value="fourth"> <input type="radio" class="btn-check" name="oqTBNB8fVJ" id="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-0abdfd715970bd0ef7d5574daa0e6d0b" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary text-white btn-danger" for="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label> <input type="radio" class="btn-check" name="oqTBNB8fVJ" id="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-04748e061c66b41433e6aa521c542811" autocomplete="off" value="sixth"> <label class="btn btn-outline-primary" for="radios-d41b6a6ca7cf1a70dff9b31c85dbf369-04748e061c66b41433e6aa521c542811"><s>Sixth</s></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-00ffba43325a2a2fc5f739184617a202" 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="1nJNiLBib1" id="radiolist-00ffba43325a2a2fc5f739184617a202-ee38e4d5dd68c4e440825018d549cb47" value="red"> <label class="form-check-label" for="radiolist-00ffba43325a2a2fc5f739184617a202-ee38e4d5dd68c4e440825018d549cb47">Red</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="1nJNiLBib1" id="radiolist-00ffba43325a2a2fc5f739184617a202-d382816a3cbeed082c9e216e7392eed1" value="green"> <label class="form-check-label" for="radiolist-00ffba43325a2a2fc5f739184617a202-d382816a3cbeed082c9e216e7392eed1">Green</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="1nJNiLBib1" id="radiolist-00ffba43325a2a2fc5f739184617a202-9594eec95be70e7b1710f730fdda33d9" value="blue"> <label class="form-check-label" for="radiolist-00ffba43325a2a2fc5f739184617a202-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-6471fa3997cc03e9d820ad23527aee87" 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-6471fa3997cc03e9d820ad23527aee87-ee38e4d5dd68c4e440825018d549cb47" value="red"> <label class="form-check-label" for="checklist-6471fa3997cc03e9d820ad23527aee87-ee38e4d5dd68c4e440825018d549cb47">Red</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-6471fa3997cc03e9d820ad23527aee87-d382816a3cbeed082c9e216e7392eed1" value="green"> <label class="form-check-label" for="checklist-6471fa3997cc03e9d820ad23527aee87-d382816a3cbeed082c9e216e7392eed1">Green</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-6471fa3997cc03e9d820ad23527aee87-9594eec95be70e7b1710f730fdda33d9" value="blue"> <label class="form-check-label" for="checklist-6471fa3997cc03e9d820ad23527aee87-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-36acd5eb323bea7587904c44add03ae3" 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="INzIGo0oIm" id="radios-36acd5eb323bea7587904c44add03ae3-66096f75ef0bcff89ac90afc09cc0810" autocomplete="off" value="1"> <label class="btn btn-outline-primary" for="radios-36acd5eb323bea7587904c44add03ae3-66096f75ef0bcff89ac90afc09cc0810">Jules Wunsch</label> <input type="radio" class="btn-check" name="INzIGo0oIm" id="radios-36acd5eb323bea7587904c44add03ae3-1bb08e28e93bfd7b7ad823611325d50d" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="radios-36acd5eb323bea7587904c44add03ae3-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label> <input type="radio" class="btn-check" name="INzIGo0oIm" id="radios-36acd5eb323bea7587904c44add03ae3-d3d3570e50c3a7b56579c72c44c3bd8c" autocomplete="off" value="7"> <label class="btn btn-outline-primary" for="radios-36acd5eb323bea7587904c44add03ae3-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checks-6b36c6bade7f2e802619b517000b7aec" 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-6b36c6bade7f2e802619b517000b7aec-66096f75ef0bcff89ac90afc09cc0810" autocomplete="off" value="1"> <label class="btn btn-outline-primary" for="checks-6b36c6bade7f2e802619b517000b7aec-66096f75ef0bcff89ac90afc09cc0810">Jules Wunsch</label> <input type="checkbox" class="btn-check" name="[]" id="checks-6b36c6bade7f2e802619b517000b7aec-1bb08e28e93bfd7b7ad823611325d50d" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="checks-6b36c6bade7f2e802619b517000b7aec-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label> <input type="checkbox" class="btn-check" name="[]" id="checks-6b36c6bade7f2e802619b517000b7aec-d3d3570e50c3a7b56579c72c44c3bd8c" autocomplete="off" value="7"> <label class="btn btn-outline-primary" for="checks-6b36c6bade7f2e802619b517000b7aec-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radiolist-dd9de9199f3349098026377ad9165e0e" 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="hFFgVnqjZV" id="radiolist-dd9de9199f3349098026377ad9165e0e-66096f75ef0bcff89ac90afc09cc0810" value="1"> <label class="form-check-label" for="radiolist-dd9de9199f3349098026377ad9165e0e-66096f75ef0bcff89ac90afc09cc0810">Jules Wunsch</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="hFFgVnqjZV" id="radiolist-dd9de9199f3349098026377ad9165e0e-1bb08e28e93bfd7b7ad823611325d50d" value="2"> <label class="form-check-label" for="radiolist-dd9de9199f3349098026377ad9165e0e-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="hFFgVnqjZV" id="radiolist-dd9de9199f3349098026377ad9165e0e-d3d3570e50c3a7b56579c72c44c3bd8c" value="7"> <label class="form-check-label" for="radiolist-dd9de9199f3349098026377ad9165e0e-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-1f56e01e50d8c6525fe32bb7025fa202" 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-1f56e01e50d8c6525fe32bb7025fa202-66096f75ef0bcff89ac90afc09cc0810" value="1"> <label class="form-check-label" for="checklist-1f56e01e50d8c6525fe32bb7025fa202-66096f75ef0bcff89ac90afc09cc0810">Jules Wunsch</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-1f56e01e50d8c6525fe32bb7025fa202-1bb08e28e93bfd7b7ad823611325d50d" value="2"> <label class="form-check-label" for="checklist-1f56e01e50d8c6525fe32bb7025fa202-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="[]" id="checklist-1f56e01e50d8c6525fe32bb7025fa202-d3d3570e50c3a7b56579c72c44c3bd8c" value="7"> <label class="form-check-label" for="checklist-1f56e01e50d8c6525fe32bb7025fa202-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</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-a0a080f42e6f13b3a2df133f073095dd" class="" method="post" name="form-a0a080f42e6f13b3a2df133f073095dd">
  <input type="hidden" name="_token" value="CXzih5S9qTv8vr2HWTGotKxPodDISjeOZTTkXXC9" autocomplete="off">
  <div class="row mb-3">
    <label for="radios-db826b8a707b1ab40fcaa53f4c4437f3" class="col-4 col-form-label">Select a Boss for Jessyca Goyette</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="boss" id="radios-db826b8a707b1ab40fcaa53f4c4437f3-d3d3570e50c3a7b56579c72c44c3bd8c" autocomplete="off" value="7"> <label class="btn btn-outline-primary" for="radios-db826b8a707b1ab40fcaa53f4c4437f3-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label> <input type="radio" class="btn-check" name="boss" id="radios-db826b8a707b1ab40fcaa53f4c4437f3-1669d9a0bc26b289ae113d7621d70c9b" autocomplete="off" value="9"> <label class="btn btn-outline-primary" for="radios-db826b8a707b1ab40fcaa53f4c4437f3-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label> <input type="radio" class="btn-check" name="boss" id="radios-db826b8a707b1ab40fcaa53f4c4437f3-4f0c0cbead6ae07c8be71951fc29d12e" autocomplete="off" value="8" checked> <label class="btn btn-outline-primary" for="radios-db826b8a707b1ab40fcaa53f4c4437f3-4f0c0cbead6ae07c8be71951fc29d12e">Gerard McGlynn</label> <input type="radio" class="btn-check" name="boss" id="radios-db826b8a707b1ab40fcaa53f4c4437f3-631e06390b23157fab1c3cce98e4b9d9" autocomplete="off" value="6"> <label class="btn btn-outline-primary" for="radios-db826b8a707b1ab40fcaa53f4c4437f3-631e06390b23157fab1c3cce98e4b9d9">Prof. Elmo Rosenbaum</label> <input type="radio" class="btn-check" name="boss" id="radios-db826b8a707b1ab40fcaa53f4c4437f3-d5ffd3be773ccd80ad616da04e9f8016" autocomplete="off" value="10"> <label class="btn btn-outline-primary" for="radios-db826b8a707b1ab40fcaa53f4c4437f3-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checklist-16622380e711db22038383f7fff52642" class="col-4 col-form-label">Select friends of Jessyca Goyette</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-16622380e711db22038383f7fff52642-1bb08e28e93bfd7b7ad823611325d50d" value="2"> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-9d31a793d380387c12b3dc978b819a7b" value="5" checked> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-9d31a793d380387c12b3dc978b819a7b">Edwina Hettinger</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-d3d3570e50c3a7b56579c72c44c3bd8c" value="7" checked> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-1669d9a0bc26b289ae113d7621d70c9b" value="9"> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-0a2a1c575a4e367b62bf138c10549edd" value="4"> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-4f0c0cbead6ae07c8be71951fc29d12e" value="8"> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-4f0c0cbead6ae07c8be71951fc29d12e">Gerard McGlynn</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-2492875cb979dac7a20a4b6834f1f28e" value="3"> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-2492875cb979dac7a20a4b6834f1f28e">Jessyca Goyette</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-66096f75ef0bcff89ac90afc09cc0810" value="1" checked> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-66096f75ef0bcff89ac90afc09cc0810">Jules Wunsch</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-631e06390b23157fab1c3cce98e4b9d9" value="6"> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-631e06390b23157fab1c3cce98e4b9d9">Prof. Elmo Rosenbaum</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="friends[]" id="checklist-16622380e711db22038383f7fff52642-d5ffd3be773ccd80ad616da04e9f8016" value="10" checked> <label class="form-check-label" for="checklist-16622380e711db22038383f7fff52642-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-8032d31d7a6b551268caa5e27257cb5b" 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-0aafa1e350d9456c5d1fc039ed3118bb" 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="DpUMnFMH6Z" id="radiolist-0aafa1e350d9456c5d1fc039ed3118bb-90745ad2b373887d3a6130127383664a" value="9"> <label class="form-check-label" for="radiolist-0aafa1e350d9456c5d1fc039ed3118bb-90745ad2b373887d3a6130127383664a">genevieve.reinger@example.com</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="DpUMnFMH6Z" id="radiolist-0aafa1e350d9456c5d1fc039ed3118bb-a55a9a2c0c64f4d9bbb5383dec8b5958" value="4"> <label class="form-check-label" for="radiolist-0aafa1e350d9456c5d1fc039ed3118bb-a55a9a2c0c64f4d9bbb5383dec8b5958">lschultz@example.com</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="DpUMnFMH6Z" id="radiolist-0aafa1e350d9456c5d1fc039ed3118bb-2a89fc7d9b9fce0d461bb5e47221b066" value="1"> <label class="form-check-label" for="radiolist-0aafa1e350d9456c5d1fc039ed3118bb-2a89fc7d9b9fce0d461bb5e47221b066">daniel.arlie@example.net</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-2bbee93b91416dc4cdbf07be40ba8216" 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="QkebaialJq" id="radios-2bbee93b91416dc4cdbf07be40ba8216-6adf97f83acf6453d4a6a4b1070f3754" autocomplete="off" value="0" checked> <label class="btn btn-outline-primary" for="radios-2bbee93b91416dc4cdbf07be40ba8216-6adf97f83acf6453d4a6a4b1070f3754">None</label> <input type="radio" class="btn-check" name="QkebaialJq" id="radios-2bbee93b91416dc4cdbf07be40ba8216-1bb08e28e93bfd7b7ad823611325d50d" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="radios-2bbee93b91416dc4cdbf07be40ba8216-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label> <input type="radio" class="btn-check" name="QkebaialJq" id="radios-2bbee93b91416dc4cdbf07be40ba8216-4f0c0cbead6ae07c8be71951fc29d12e" autocomplete="off" value="8"> <label class="btn btn-outline-primary" for="radios-2bbee93b91416dc4cdbf07be40ba8216-4f0c0cbead6ae07c8be71951fc29d12e">Gerard McGlynn</label> <input type="radio" class="btn-check" name="QkebaialJq" id="radios-2bbee93b91416dc4cdbf07be40ba8216-1669d9a0bc26b289ae113d7621d70c9b" autocomplete="off" value="9"> <label class="btn btn-outline-primary" for="radios-2bbee93b91416dc4cdbf07be40ba8216-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label>
    </div>
  </div>
</div>