View on GitLab

With Models

There are a few -model variants for input components intended to choose among different options (Select, Checks and Radios), able to directly handle Collections of Eloquent Models (or any other PHP object).

  • x-larastrap::select-model
  • x-larastrap::checks-model
  • x-larastrap::checklist-model
  • x-larastrap::radios-model
  • x-larastrap::radiolist-model

options

As the base variants of reference components accept a option parameter to specify selectable values, the -model variants permit to use objects (eventually: Eloquent models) as options. 

@php

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

@endphp

<x-larastrap::select-model label="Select a User" :options="$users" />
<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="select-e5cc5f79" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-e5cc5f79" class="form-select" name="nLjJgRiM9h">
      <option value="10">
        Shany Bosco
      </option>
      <option value="3">
        Jessyca Goyette
      </option>
      <option value="7">
        Eliezer Luettgen
      </option>
    </select>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-676846d9" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div id="radios-676846d9" class="btn-group" role="group">
      <input type="radio" class="btn-check" id="radios-676846d9-d5ffd3be773ccd80ad616da04e9f8016" name="TWhuI7XLK6" value="10" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-676846d9-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label> <input type="radio" class="btn-check" id="radios-676846d9-2492875cb979dac7a20a4b6834f1f28e" name="TWhuI7XLK6" value="3" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-676846d9-2492875cb979dac7a20a4b6834f1f28e">Jessyca Goyette</label> <input type="radio" class="btn-check" id="radios-676846d9-d3d3570e50c3a7b56579c72c44c3bd8c" name="TWhuI7XLK6" value="7" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-676846d9-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checks-f0efa86e" class="col-4 col-form-label">Select Many Users</label>
  <div class="col-8">
    <div id="checks-f0efa86e" class="btn-group" role="group">
      <input type="checkbox" class="btn-check" id="checks-f0efa86e-d5ffd3be773ccd80ad616da04e9f8016" name="[]" value="10" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f0efa86e-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label> <input type="checkbox" class="btn-check" id="checks-f0efa86e-2492875cb979dac7a20a4b6834f1f28e" name="[]" value="3" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f0efa86e-2492875cb979dac7a20a4b6834f1f28e">Jessyca Goyette</label> <input type="checkbox" class="btn-check" id="checks-f0efa86e-d3d3570e50c3a7b56579c72c44c3bd8c" name="[]" value="7" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f0efa86e-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radiolist-752e09a8" 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" id="radiolist-752e09a8-d5ffd3be773ccd80ad616da04e9f8016" name="TMLtdHHxGJ" value="10" autocomplete="off"> <label class="form-check-label" for="radiolist-752e09a8-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-752e09a8-2492875cb979dac7a20a4b6834f1f28e" name="TMLtdHHxGJ" value="3" autocomplete="off"> <label class="form-check-label" for="radiolist-752e09a8-2492875cb979dac7a20a4b6834f1f28e">Jessyca Goyette</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-752e09a8-d3d3570e50c3a7b56579c72c44c3bd8c" name="TMLtdHHxGJ" value="7" autocomplete="off"> <label class="form-check-label" for="radiolist-752e09a8-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-7b204c24" 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" id="checklist-7b204c24-d5ffd3be773ccd80ad616da04e9f8016" name="[]" value="10" autocomplete="off"> <label class="form-check-label" for="checklist-7b204c24-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-7b204c24-2492875cb979dac7a20a4b6834f1f28e" name="[]" value="3" autocomplete="off"> <label class="form-check-label" for="checklist-7b204c24-2492875cb979dac7a20a4b6834f1f28e">Jessyca Goyette</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-7b204c24-d3d3570e50c3a7b56579c72c44c3bd8c" name="[]" value="7" autocomplete="off"> <label class="form-check-label" for="checklist-7b204c24-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
      </div>
    </div>
  </div>
</div>

-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::select-model name="boss" label="Select a Boss" :options="$bosses" />
    <x-larastrap::checklist-model name="friends" label="Select Friends" :options="$users" />
</x-larastrap::form>

<form id="form-a67b778d" class="" method="post" name="form-a67b778d">
  <input type="hidden" name="_token" value="MJpM9086C3As9s6L8dKKcjIWWAbRbjsC6rCundOk" autocomplete="off">
  <div class="row mb-2">
    <label for="select-1392badb" class="col-4 col-form-label">Select a Boss</label>
    <div class="col-8">
      <select id="select-1392badb" class="form-select" name="boss">
        <option value="7" selected>
          Eliezer Luettgen
        </option>
        <option value="9">
          Erica Krajcik
        </option>
        <option value="8">
          Gerard McGlynn
        </option>
        <option value="6">
          Prof. Elmo Rosenbaum
        </option>
        <option value="10">
          Shany Bosco
        </option>
      </select>
    </div>
  </div>
  <div class="row mb-2">
    <label for="checklist-f20170e4" class="col-4 col-form-label">Select Friends</label>
    <div class="col-8">
      <div class="form-control-plaintext">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-1bb08e28e93bfd7b7ad823611325d50d" name="friends[]" value="2" autocomplete="off"> <label class="form-check-label" for="checklist-f20170e4-1bb08e28e93bfd7b7ad823611325d50d">Ebba Olson I</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-9d31a793d380387c12b3dc978b819a7b" name="friends[]" value="5" autocomplete="off"> <label class="form-check-label" for="checklist-f20170e4-9d31a793d380387c12b3dc978b819a7b">Edwina Hettinger</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-d3d3570e50c3a7b56579c72c44c3bd8c" name="friends[]" value="7" autocomplete="off"> <label class="form-check-label" for="checklist-f20170e4-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-1669d9a0bc26b289ae113d7621d70c9b" name="friends[]" value="9" autocomplete="off"> <label class="form-check-label" for="checklist-f20170e4-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-0a2a1c575a4e367b62bf138c10549edd" name="friends[]" value="4" autocomplete="off" checked> <label class="form-check-label" for="checklist-f20170e4-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-4f0c0cbead6ae07c8be71951fc29d12e" name="friends[]" value="8" autocomplete="off"> <label class="form-check-label" for="checklist-f20170e4-4f0c0cbead6ae07c8be71951fc29d12e">Gerard McGlynn</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-2492875cb979dac7a20a4b6834f1f28e" name="friends[]" value="3" autocomplete="off" checked> <label class="form-check-label" for="checklist-f20170e4-2492875cb979dac7a20a4b6834f1f28e">Jessyca Goyette</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-66096f75ef0bcff89ac90afc09cc0810" name="friends[]" value="1" autocomplete="off" checked> <label class="form-check-label" for="checklist-f20170e4-66096f75ef0bcff89ac90afc09cc0810">Jules Wunsch</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-631e06390b23157fab1c3cce98e4b9d9" name="friends[]" value="6" autocomplete="off"> <label class="form-check-label" for="checklist-f20170e4-631e06390b23157fab1c3cce98e4b9d9">Prof. Elmo Rosenbaum</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-f20170e4-d5ffd3be773ccd80ad616da04e9f8016" name="friends[]" value="10" autocomplete="off" checked> <label class="form-check-label" for="checklist-f20170e4-d5ffd3be773ccd80ad616da04e9f8016">Shany Bosco</label>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-8358af38" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

translateCallback

For -model variant 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::select-model label="Select a User" :options="$users" :translateCallback="$translate" />
<x-larastrap::radiolist-model label="Select a User" :options="$users" :translateCallback="$translate" />

<div class="row mb-3">
  <label for="select-8d15b2ce" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-8d15b2ce" class="form-select" name="5ikbpNKYgt">
      <option value="9">
        genevieve.reinger@example.com
      </option>
      <option value="8">
        xwelch@example.org
      </option>
      <option value="2">
        ebert.jeremy@example.net
      </option>
    </select>
  </div>
</div>
<div class="row mb-3">
  <label for="radiolist-29104c86" 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" id="radiolist-29104c86-90745ad2b373887d3a6130127383664a" name="2PWZIMeHYX" value="9" autocomplete="off"> <label class="form-check-label" for="radiolist-29104c86-90745ad2b373887d3a6130127383664a">genevieve.reinger@example.com</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-29104c86-8bdcc0369c5ca8bc583c537be9689cf9" name="2PWZIMeHYX" value="8" autocomplete="off"> <label class="form-check-label" for="radiolist-29104c86-8bdcc0369c5ca8bc583c537be9689cf9">xwelch@example.org</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-29104c86-56e7ac8e309bfc012300abb4bee973fd" name="2PWZIMeHYX" value="2" autocomplete="off"> <label class="form-check-label" for="radiolist-29104c86-56e7ac8e309bfc012300abb4bee973fd">ebert.jeremy@example.net</label>
      </div>
    </div>
  </div>
</div>

idfrom / namefrom

As alternative to translateCallback , it is possible to specify inline the objects' attributes from which get both "id" and "name", using the idfrom and namefrom parameters. 

@php

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

@endphp

<x-larastrap::select-model label="Select a User" :options="$users" idfrom="email" namefrom="id" />
<x-larastrap::radiolist-model label="Select a User" :options="$users" idfrom="email" namefrom="email" />

<div class="row mb-3">
  <label for="select-9eb72ab9" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-9eb72ab9" class="form-select" name="6FoeM4EEUF">
      <option value="xwelch@example.org">
        8
      </option>
      <option value="hermina.streich@example.net">
        5
      </option>
      <option value="ebert.jeremy@example.net">
        2
      </option>
    </select>
  </div>
</div>
<div class="row mb-3">
  <label for="radiolist-3ab2d4f1" 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" id="radiolist-3ab2d4f1-8bdcc0369c5ca8bc583c537be9689cf9" name="KtuVWq4jWm" value="xwelch@example.org" autocomplete="off"> <label class="form-check-label" for="radiolist-3ab2d4f1-8bdcc0369c5ca8bc583c537be9689cf9">xwelch@example.org</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-3ab2d4f1-dae3a4179713f1a0187f4dd839c855b4" name="KtuVWq4jWm" value="hermina.streich@example.net" autocomplete="off"> <label class="form-check-label" for="radiolist-3ab2d4f1-dae3a4179713f1a0187f4dd839c855b4">hermina.streich@example.net</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-3ab2d4f1-56e7ac8e309bfc012300abb4bee973fd" name="KtuVWq4jWm" value="ebert.jeremy@example.net" autocomplete="off"> <label class="form-check-label" for="radiolist-3ab2d4f1-56e7ac8e309bfc012300abb4bee973fd">ebert.jeremy@example.net</label>
      </div>
    </div>
  </div>
</div>

extra_options

The -model variants have also an extra_options parameter to define other options aside those collected in 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::select-model label="Select a User" :options="$users" :extra_options="[0 => 'None']" value="0" />
<x-larastrap::radios-model label="Select a User" :options="$users" :extra_options="[0 => 'None']" value="0" />

<div class="row mb-3">
  <label for="select-efba9ec3" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-efba9ec3" class="form-select" name="5JL7KZ0y8o">
      <option value="0" selected>
        None
      </option>
      <option value="8">
        Gerard McGlynn
      </option>
      <option value="9">
        Erica Krajcik
      </option>
      <option value="4">
        Geraldine Abshire IV
      </option>
    </select>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-9f568eba" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <div id="radios-9f568eba" class="btn-group" role="group">
      <input type="radio" class="btn-check" id="radios-9f568eba-6adf97f83acf6453d4a6a4b1070f3754" name="dg7bGlsqqu" value="0" autocomplete="off" checked> <label class="btn btn-outline-primary" for="radios-9f568eba-6adf97f83acf6453d4a6a4b1070f3754">None</label> <input type="radio" class="btn-check" id="radios-9f568eba-4f0c0cbead6ae07c8be71951fc29d12e" name="dg7bGlsqqu" value="8" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-9f568eba-4f0c0cbead6ae07c8be71951fc29d12e">Gerard McGlynn</label> <input type="radio" class="btn-check" id="radios-9f568eba-1669d9a0bc26b289ae113d7621d70c9b" name="dg7bGlsqqu" value="9" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-9f568eba-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label> <input type="radio" class="btn-check" id="radios-9f568eba-0a2a1c575a4e367b62bf138c10549edd" name="dg7bGlsqqu" value="4" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-9f568eba-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</label>
    </div>
  </div>
</div>