View on GitLab

Selects

options

x-larastrap::select is the equivalent of a "select" HTML node, with his own options .

Choose One

@php

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

@endphp

<x-larastrap::select label="Choose One" :options="$options" />

<div class="row mb-3">
  <label for="select-b665108511184762f741794d2500e55f" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <select id="select-b665108511184762f741794d2500e55f" class="form-select" name="mxWcntC83P">
      <option value="red">
        Red
      </option>
      <option value="green">
        Green
      </option>
      <option value="blue">
        Blue
      </option>
    </select>
  </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
disabled - set true if the option is not selectable
attributes - an arbitrary associative array of data attributes
children - an equivalent array of options, to be used to render optgroups

Choose One

@php

$options = [
    'first' => (object) [
        'label' => 'First',
    ],
    'second' => (object) [
        'label' => 'Second',
        'disabled' => true,
    ],
    'third' => (object) [
        'label' => 'Third',
        'children' => [
            'third_1' => (object) [
                'label' => 'Third / First',
            ],
            'third_2' => (object) [
                'label' => 'Third / Second',
                'disabled' => true,
            ],
            'third_3' => (object) [
                'label' => 'Third / Third',
                'attributes' => [
                    'data-attr' => 'value',
                ],
            ],
        ],
    ],
];

@endphp

<x-larastrap::select label="Choose One" :options="$options" />

<div class="row mb-3">
  <label for="select-ecab5ec78152be806dbdea28d5e34ac2" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <select id="select-ecab5ec78152be806dbdea28d5e34ac2" class="form-select" name="s1f8RkoWz9">
      <option value="first">
        First
      </option>
      <option value="second" disabled>
        Second
      </option>
      <optgroup label="Third">
        <option value="third_1">
          Third / First
        </option>
        <option value="third_2" disabled>
          Third / Second
        </option>
        <option value="third_3" data-attr="value">
          Third / Third
        </option>
      </optgroup>
    </select>
  </div>
</div>

With Models

The x-larastrap::select-model variant permits to use objects (eventually: Eloquent models) as options.

Select a User

@php

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

@endphp

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

<div class="row mb-3">
  <label for="select-62382bc9a876801ed00ffef26cc0a559" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-62382bc9a876801ed00ffef26cc0a559" class="form-select" name="im1rwuZFxV">
      <option value="8">
        Gerard McGlynn
      </option>
      <option value="6">
        Prof. Elmo Rosenbaum
      </option>
      <option value="10">
        Shany Bosco
      </option>
    </select>
  </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);
// }

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

@endphp

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

<form id="form-4e732ced3463d06de0ca9a15b6153677" class="" method="post" name="form-4e732ced3463d06de0ca9a15b6153677">
  <input type="hidden" name="_token" value="j9dRnlkbizD2CM9BLwPqYql4oyIF3v6S5ljVioFF" autocomplete="off">
  <div class="row mb-3">
    <label for="select-e1e4bb41f8771dd6fbc22093cc84bd12" class="col-4 col-form-label">Select a Boss for Jessyca Goyette</label>
    <div class="col-8">
      <select id="select-e1e4bb41f8771dd6fbc22093cc84bd12" 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="col-12 text-end">
    <button id="button-8984eaf101502200a9bf25b657aacf63" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

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).

Select a User

@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" />

<div class="row mb-3">
  <label for="select-785fdbf3c6f983fdf7a776904e6afd01" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-785fdbf3c6f983fdf7a776904e6afd01" class="form-select" name="WJNyqzUjcJ">
      <option value="1">
        daniel.arlie@example.net
      </option>
      <option value="5">
        hermina.streich@example.net
      </option>
      <option value="2">
        ebert.jeremy@example.net
      </option>
    </select>
  </div>
</div>

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.

Select a 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" />

<div class="row mb-3">
  <label for="select-95dec956ef8f74e7bfdc4d2861e97635" class="col-4 col-form-label">Select a User</label>
  <div class="col-8">
    <select id="select-95dec956ef8f74e7bfdc4d2861e97635" class="form-select" name="bG0ukTpQbZ">
      <option value="0" selected>
        None
      </option>
      <option value="10">
        Shany Bosco
      </option>
      <option value="6">
        Prof. Elmo Rosenbaum
      </option>
      <option value="7">
        Eliezer Luettgen
      </option>
    </select>
  </div>
</div>

Intro

Components

Forms

Containers

Custom Elements

More

About

Selects

options

With Models