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="fWW1HvEAmO">
      <option value="9">
        Erica Krajcik
      </option>
      <option value="7">
        Eliezer Luettgen
      </option>
      <option value="4">
        Geraldine Abshire IV
      </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-1669d9a0bc26b289ae113d7621d70c9b" name="aMCxhvYah9" value="9" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-676846d9-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label> <input type="radio" class="btn-check" id="radios-676846d9-d3d3570e50c3a7b56579c72c44c3bd8c" name="aMCxhvYah9" value="7" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-676846d9-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label> <input type="radio" class="btn-check" id="radios-676846d9-0a2a1c575a4e367b62bf138c10549edd" name="aMCxhvYah9" value="4" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-676846d9-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</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-1669d9a0bc26b289ae113d7621d70c9b" name="[]" value="9" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f0efa86e-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</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> <input type="checkbox" class="btn-check" id="checks-f0efa86e-0a2a1c575a4e367b62bf138c10549edd" name="[]" value="4" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f0efa86e-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</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-1669d9a0bc26b289ae113d7621d70c9b" name="r1TgoEGZcp" value="9" autocomplete="off"> <label class="form-check-label" for="radiolist-752e09a8-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-752e09a8-d3d3570e50c3a7b56579c72c44c3bd8c" name="r1TgoEGZcp" value="7" autocomplete="off"> <label class="form-check-label" for="radiolist-752e09a8-d3d3570e50c3a7b56579c72c44c3bd8c">Eliezer Luettgen</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-752e09a8-0a2a1c575a4e367b62bf138c10549edd" name="r1TgoEGZcp" value="4" autocomplete="off"> <label class="form-check-label" for="radiolist-752e09a8-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</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-1669d9a0bc26b289ae113d7621d70c9b" name="[]" value="9" autocomplete="off"> <label class="form-check-label" for="checklist-7b204c24-1669d9a0bc26b289ae113d7621d70c9b">Erica Krajcik</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 class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-7b204c24-0a2a1c575a4e367b62bf138c10549edd" name="[]" value="4" autocomplete="off"> <label class="form-check-label" for="checklist-7b204c24-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</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="MzKGplMvETyGguwhNVcxqLC6HMvbybaqVuIADPdC" 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">
          Eliezer Luettgen
        </option>
        <option value="9">
          Erica Krajcik
        </option>
        <option value="8" selected>
          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" checked> <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" checked> <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"> <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"> <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="vI9AKo7Ay3">
      <option value="1">
        daniel.arlie@example.net
      </option>
      <option value="8">
        xwelch@example.org
      </option>
      <option value="4">
        lschultz@example.com
      </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-2a89fc7d9b9fce0d461bb5e47221b066" name="r6T1ioTkf0" value="1" autocomplete="off"> <label class="form-check-label" for="radiolist-29104c86-2a89fc7d9b9fce0d461bb5e47221b066">daniel.arlie@example.net</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-29104c86-8bdcc0369c5ca8bc583c537be9689cf9" name="r6T1ioTkf0" 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-a55a9a2c0c64f4d9bbb5383dec8b5958" name="r6T1ioTkf0" value="4" autocomplete="off"> <label class="form-check-label" for="radiolist-29104c86-a55a9a2c0c64f4d9bbb5383dec8b5958">lschultz@example.com</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="b3CSWaCaus">
      <option value="daniel.arlie@example.net">
        1
      </option>
      <option value="zemlak.noel@example.com">
        6
      </option>
      <option value="hermina.streich@example.net">
        5
      </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-2a89fc7d9b9fce0d461bb5e47221b066" name="PLLiUap2eC" value="daniel.arlie@example.net" autocomplete="off"> <label class="form-check-label" for="radiolist-3ab2d4f1-2a89fc7d9b9fce0d461bb5e47221b066">daniel.arlie@example.net</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-3ab2d4f1-cb97c06a6289ee0251b55e0ad21b4c13" name="PLLiUap2eC" value="zemlak.noel@example.com" autocomplete="off"> <label class="form-check-label" for="radiolist-3ab2d4f1-cb97c06a6289ee0251b55e0ad21b4c13">zemlak.noel@example.com</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-3ab2d4f1-dae3a4179713f1a0187f4dd839c855b4" name="PLLiUap2eC" value="hermina.streich@example.net" autocomplete="off"> <label class="form-check-label" for="radiolist-3ab2d4f1-dae3a4179713f1a0187f4dd839c855b4">hermina.streich@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="psDjkPPeRS">
      <option value="0" selected>
        None
      </option>
      <option value="4">
        Geraldine Abshire IV
      </option>
      <option value="9">
        Erica Krajcik
      </option>
      <option value="5">
        Edwina Hettinger
      </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="tYibcmJthB" 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-0a2a1c575a4e367b62bf138c10549edd" name="tYibcmJthB" value="4" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-9f568eba-0a2a1c575a4e367b62bf138c10549edd">Geraldine Abshire IV</label> <input type="radio" class="btn-check" id="radios-9f568eba-1669d9a0bc26b289ae113d7621d70c9b" name="tYibcmJthB" 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-9d31a793d380387c12b3dc978b819a7b" name="tYibcmJthB" value="5" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-9f568eba-9d31a793d380387c12b3dc978b819a7b">Edwina Hettinger</label>
    </div>
  </div>
</div>