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-7705b4c3" class="col-4 col-form-label">A Classic Checkbox</label>
  <div class="col-8">
    <div class="form-check mt-1">
      <input id="check-7705b4c3" type="checkbox" class="form-check-input" name="5YKSWIbNhr">
    </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-2fba4951" class="col-4 col-form-label">A Switch</label>
  <div class="col-8">
    <div class="form-check form-switch mt-1">
      <input id="check-2fba4951" type="checkbox" class="form-check-input" name="S1A98uKkhh">
    </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-18b7ec58" class="" method="post" name="form-18b7ec58">
  <input type="hidden" name="_token" value="44DPOmtpKAqWWY3AN2cF0N3rkP7bR3lfov5VabcX" autocomplete="off">
  <div class="alert alert-info">
    Horizontal form, non-inline checkbox
  </div>
  <div class="row mb-2">
    <label for="input-0a3aa025" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-0a3aa025" type="text" class="form-control" name="ZFcbQ2LooB" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="check-73d90436" class="col-4 col-form-label">Non-Inline Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-73d90436" type="checkbox" class="form-check-input" name="NFsOFwYcB1">
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-c5c43a24" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-8028fbe6" class="" method="post" name="form-8028fbe6">
  <input type="hidden" name="_token" value="44DPOmtpKAqWWY3AN2cF0N3rkP7bR3lfov5VabcX" autocomplete="off">
  <div class="alert alert-info">
    Vertical form, non-inline checkbox
  </div>
  <div class="mb-2">
    <label for="input-cd6bd885" class="form-label">Reference Text</label> <input id="input-cd6bd885" type="text" class="form-control" name="0WrjHKReo4" value="">
  </div>
  <div class="mb-2">
    <label for="check-a6ce33e7" class="form-label">Non-Inline Check</label>
    <div class="form-check mt-1">
      <input id="check-a6ce33e7" type="checkbox" class="form-check-input" name="BKbYlXfA6S">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-af092aa5" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-72b11366" class="" method="post" name="form-72b11366">
  <input type="hidden" name="_token" value="44DPOmtpKAqWWY3AN2cF0N3rkP7bR3lfov5VabcX" autocomplete="off">
  <div class="alert alert-info">
    Horizontal form, inline checkbox
  </div>
  <div class="row mb-2">
    <label for="input-bf5909a4" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-bf5909a4" type="text" class="form-control" name="aRVqsnVQQX" value="">
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-3556c239" type="checkbox" class="form-check-input" name="xr4d1OI7RA"> <label for="check-3556c239" class="">Inline Check</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-469f29b5" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-dc16bec8" class="" method="post" name="form-dc16bec8">
  <input type="hidden" name="_token" value="44DPOmtpKAqWWY3AN2cF0N3rkP7bR3lfov5VabcX" autocomplete="off">
  <div class="alert alert-info">
    Horizontal form, inline checkbox aligned to the beginning
  </div>
  <div class="row mb-2">
    <label for="input-2e97c33f" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-2e97c33f" type="text" class="form-control" name="OTLc8GOli2" value="">
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-8239ef4a" type="checkbox" class="form-check-input" name="FdmLBF7RH9"> <label for="check-8239ef4a" class="">Inline Check</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-f32f164f" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-2e8f5648" class="" method="post" name="form-2e8f5648">
  <input type="hidden" name="_token" value="44DPOmtpKAqWWY3AN2cF0N3rkP7bR3lfov5VabcX" autocomplete="off">
  <div class="alert alert-info">
    Vertical form, inline checkbox
  </div>
  <div class="mb-2">
    <label for="input-e1ef5a9f" class="form-label">Reference Text</label> <input id="input-e1ef5a9f" type="text" class="form-control" name="OBw1NkSIy3" value="">
  </div>
  <div class="mb-2">
    <div class="form-check mt-1">
      <input id="check-4d4176ea" type="checkbox" class="form-check-input" name="S3HyFUWkaH"> <label for="check-4d4176ea" class="">Inline Check</label>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-7114403f" 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-1419c129" class="col-4 col-form-label">Choose Many</label>
  <div class="col-8">
    <div id="checks-1419c129" class="btn-group" role="group">
      <input type="checkbox" class="btn-check" id="checks-1419c129-ee38e4d5dd68c4e440825018d549cb47" name="[]" value="red" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-1419c129-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" id="checks-1419c129-d382816a3cbeed082c9e216e7392eed1" name="[]" value="green" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-1419c129-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" id="checks-1419c129-9594eec95be70e7b1710f730fdda33d9" name="[]" value="blue" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-1419c129-9594eec95be70e7b1710f730fdda33d9">Blue</label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-a116319c" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <div id="radios-a116319c" class="btn-group" role="group">
      <input type="radio" class="btn-check" id="radios-a116319c-ee38e4d5dd68c4e440825018d549cb47" name="lzv39pPpH8" value="red" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-a116319c-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" id="radios-a116319c-d382816a3cbeed082c9e216e7392eed1" name="lzv39pPpH8" value="green" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-a116319c-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" id="radios-a116319c-9594eec95be70e7b1710f730fdda33d9" name="lzv39pPpH8" value="blue" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-a116319c-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
  • classes - CSS classes to be added to the 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',
        'attributes' => ['data-bs-toggle' => 'tooltip', 'data-bs-title' => 'Sample tooltip'],
    ],
    'fourth' => (object) [
        'label' => 'Fourth',
        'hidden' => true,
    ],
    'fifth' => (object) [
        'label' => 'Fifth',
        '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-f392a057" class="col-4 col-form-label">Choose Many</label>
  <div class="col-8">
    <div id="checks-f392a057" class="btn-group" role="group">
      <input type="checkbox" class="btn-check" id="first" name="[]" value="first" autocomplete="off"> <label class="btn btn-outline-primary" for="first">First</label> <input type="checkbox" class="btn-check disabled" disabled id="checks-f392a057-c22cf8376b1893dcfcef0649fe1a7d87" name="[]" value="second" autocomplete="off"> <label class="btn btn-outline-primary disabled" disabled for="checks-f392a057-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="checkbox" class="btn-check" id="checks-f392a057-168909c0b6f1dfbd48f679d47059c1d6" name="[]" value="third" autocomplete="off"> <label class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-title="Sample tooltip" for="checks-f392a057-168909c0b6f1dfbd48f679d47059c1d6">Third</label> <input type="checkbox" class="btn-check" id="checks-f392a057-6e599f7a2a9186d391be4537f105be98" name="[]" value="fourth" autocomplete="off"> <input type="checkbox" class="btn-check" id="checks-f392a057-0abdfd715970bd0ef7d5574daa0e6d0b" name="[]" value="fifth" autocomplete="off"> <label class="btn btn-outline-primary text-white btn-danger" for="checks-f392a057-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label> <input type="checkbox" class="btn-check" id="checks-f392a057-04748e061c66b41433e6aa521c542811" name="[]" value="sixth" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f392a057-04748e061c66b41433e6aa521c542811"><s>Sixth</s></label>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="radios-469d50e2" class="col-4 col-form-label">Choose One</label>
  <div class="col-8">
    <div id="radios-469d50e2" class="btn-group" role="group">
      <input type="radio" class="btn-check" id="first" name="D8wxSzBzQe" value="first" autocomplete="off"> <label class="btn btn-outline-primary" for="first">First</label> <input type="radio" class="btn-check disabled" disabled id="radios-469d50e2-c22cf8376b1893dcfcef0649fe1a7d87" name="D8wxSzBzQe" value="second" autocomplete="off"> <label class="btn btn-outline-primary disabled" disabled for="radios-469d50e2-c22cf8376b1893dcfcef0649fe1a7d87">Second</label> <input type="radio" class="btn-check" id="radios-469d50e2-168909c0b6f1dfbd48f679d47059c1d6" name="D8wxSzBzQe" value="third" autocomplete="off"> <label class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-title="Sample tooltip" for="radios-469d50e2-168909c0b6f1dfbd48f679d47059c1d6">Third</label> <input type="radio" class="btn-check" id="radios-469d50e2-6e599f7a2a9186d391be4537f105be98" name="D8wxSzBzQe" value="fourth" autocomplete="off"> <input type="radio" class="btn-check" id="radios-469d50e2-0abdfd715970bd0ef7d5574daa0e6d0b" name="D8wxSzBzQe" value="fifth" autocomplete="off"> <label class="btn btn-outline-primary text-white btn-danger" for="radios-469d50e2-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label> <input type="radio" class="btn-check" id="radios-469d50e2-04748e061c66b41433e6aa521c542811" name="D8wxSzBzQe" value="sixth" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-469d50e2-04748e061c66b41433e6aa521c542811"><s>Sixth</s></label>
    </div>
  </div>
</div>

There are also variants to use a Collection of objects in place of options : read the dedicated page for details.

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-81f5ac7e" 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" id="radiolist-81f5ac7e-ee38e4d5dd68c4e440825018d549cb47" name="fg0pnhuRfh" value="red" autocomplete="off"> <label class="form-check-label" for="radiolist-81f5ac7e-ee38e4d5dd68c4e440825018d549cb47">Red</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-81f5ac7e-d382816a3cbeed082c9e216e7392eed1" name="fg0pnhuRfh" value="green" autocomplete="off"> <label class="form-check-label" for="radiolist-81f5ac7e-d382816a3cbeed082c9e216e7392eed1">Green</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-81f5ac7e-9594eec95be70e7b1710f730fdda33d9" name="fg0pnhuRfh" value="blue" autocomplete="off"> <label class="form-check-label" for="radiolist-81f5ac7e-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-c691dfc8" 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" id="checklist-c691dfc8-ee38e4d5dd68c4e440825018d549cb47" name="[]" value="red" autocomplete="off"> <label class="form-check-label" for="checklist-c691dfc8-ee38e4d5dd68c4e440825018d549cb47">Red</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-c691dfc8-d382816a3cbeed082c9e216e7392eed1" name="[]" value="green" autocomplete="off"> <label class="form-check-label" for="checklist-c691dfc8-d382816a3cbeed082c9e216e7392eed1">Green</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-c691dfc8-9594eec95be70e7b1710f730fdda33d9" name="[]" value="blue" autocomplete="off"> <label class="form-check-label" for="checklist-c691dfc8-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
</div>

Of course, this layout also handles the same optional customizations in the options array. 

@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' => 'list_first',
    ],
    'second' => (object) [
        'label' => 'Second',
        'disabled' => true,
    ],
    'third' => (object) [
        'label' => 'Third',
        'attributes' => ['data-bs-toggle' => 'tooltip', 'data-bs-title' => 'Sample tooltip'],
    ],
    'fourth' => (object) [
        'label' => 'Fourth',
        'hidden' => true,
    ],
    'fifth' => (object) [
        'label' => 'Fifth',
        'classes' => ['text-white', 'bg-danger'],
    ],
    'sixth' => (object) [
        'label_html' => '<s>Sixth</s>',
    ],
];

@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-b349923a" 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" id="list_first" name="btNhkt2jnE" value="first" autocomplete="off"> <label class="form-check-label" for="list_first">First</label>
      </div>
      <div class="form-check">
        <input class="form-check-input disabled" type="radio" disabled id="radiolist-b349923a-c22cf8376b1893dcfcef0649fe1a7d87" name="btNhkt2jnE" value="second" autocomplete="off"> <label class="form-check-label disabled" disabled for="radiolist-b349923a-c22cf8376b1893dcfcef0649fe1a7d87">Second</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-b349923a-168909c0b6f1dfbd48f679d47059c1d6" name="btNhkt2jnE" value="third" autocomplete="off"> <label class="form-check-label" data-bs-toggle="tooltip" data-bs-title="Sample tooltip" for="radiolist-b349923a-168909c0b6f1dfbd48f679d47059c1d6">Third</label>
      </div>
      <div class="form-check" hidden="">
        <input class="form-check-input" type="radio" id="radiolist-b349923a-6e599f7a2a9186d391be4537f105be98" name="btNhkt2jnE" value="fourth" autocomplete="off"> <label class="form-check-label" for="radiolist-b349923a-6e599f7a2a9186d391be4537f105be98">Fourth</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-b349923a-0abdfd715970bd0ef7d5574daa0e6d0b" name="btNhkt2jnE" value="fifth" autocomplete="off"> <label class="form-check-label text-white bg-danger" for="radiolist-b349923a-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" id="radiolist-b349923a-04748e061c66b41433e6aa521c542811" name="btNhkt2jnE" value="sixth" autocomplete="off"> <label class="form-check-label" for="radiolist-b349923a-04748e061c66b41433e6aa521c542811"><s>Sixth</s></label>
      </div>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="checklist-69c26937" 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" id="list_first" name="[]" value="first" autocomplete="off"> <label class="form-check-label" for="list_first">First</label>
      </div>
      <div class="form-check">
        <input class="form-check-input disabled" type="checkbox" disabled id="checklist-69c26937-c22cf8376b1893dcfcef0649fe1a7d87" name="[]" value="second" autocomplete="off"> <label class="form-check-label disabled" disabled for="checklist-69c26937-c22cf8376b1893dcfcef0649fe1a7d87">Second</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-69c26937-168909c0b6f1dfbd48f679d47059c1d6" name="[]" value="third" autocomplete="off"> <label class="form-check-label" data-bs-toggle="tooltip" data-bs-title="Sample tooltip" for="checklist-69c26937-168909c0b6f1dfbd48f679d47059c1d6">Third</label>
      </div>
      <div class="form-check" hidden="">
        <input class="form-check-input" type="checkbox" id="checklist-69c26937-6e599f7a2a9186d391be4537f105be98" name="[]" value="fourth" autocomplete="off"> <label class="form-check-label" for="checklist-69c26937-6e599f7a2a9186d391be4537f105be98">Fourth</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-69c26937-0abdfd715970bd0ef7d5574daa0e6d0b" name="[]" value="fifth" autocomplete="off"> <label class="form-check-label text-white bg-danger" for="checklist-69c26937-0abdfd715970bd0ef7d5574daa0e6d0b">Fifth</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="checklist-69c26937-04748e061c66b41433e6aa521c542811" name="[]" value="sixth" autocomplete="off"> <label class="form-check-label" for="checklist-69c26937-04748e061c66b41433e6aa521c542811"><s>Sixth</s></label>
      </div>
    </div>
  </div>
</div>