View on GitLab

Selects

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

options

options can be a simple associative array where keys are the HTML values and values are the related labels. 

@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-8c5fdc12" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <select id="select-8c5fdc12" class="form-select" name="Z1KyoUWMGl">
      <option value="red">
        Red
      </option>
      <option value="green">
        Green
      </option>
      <option value="blue">
        Blue
      </option>
    </select>
  </div>
</div>

But each value within 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
@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-fa4ac815" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <select id="select-fa4ac815" class="form-select" name="5ZvhW5vxr7">
      <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>

It also exists a x-larastrap::select-model variant to use a Collection of objects as options : read the dedicated page for details.