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="C8aZkVhARj">
</div>
</div>
</div>
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="IZDQYUMaXT">
</div>
</div>
</div>
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.
<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="oVTd1j4HgyiOY07EZYaz4BiBcmy6TeUc8JQc0608" 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="Gvvw61ZD55" 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="EOUSyNwhbw">
</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="oVTd1j4HgyiOY07EZYaz4BiBcmy6TeUc8JQc0608" 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="HuuQMOgNmT" 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="caTJyGq3up">
</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="oVTd1j4HgyiOY07EZYaz4BiBcmy6TeUc8JQc0608" 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="ooAuNZFtrq" 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="2cdO2EJquZ"> <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="oVTd1j4HgyiOY07EZYaz4BiBcmy6TeUc8JQc0608" 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="uf8Z4VdTrU" 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="9M8XqKXSXr"> <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="oVTd1j4HgyiOY07EZYaz4BiBcmy6TeUc8JQc0608" 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="nmds9qQs84" value="">
</div>
<div class="mb-2">
<div class="form-check mt-1">
<input id="check-4d4176ea" type="checkbox" class="form-check-input" name="EsVdt8PtFo"> <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,
],
],
];
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="qkJVl0EC4M" 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="qkJVl0EC4M" 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="qkJVl0EC4M" 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:
@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="zv7uPVfex6" 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="zv7uPVfex6" 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="zv7uPVfex6" 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="zv7uPVfex6" value="fourth" autocomplete="off"> <input type="radio" class="btn-check" id="radios-469d50e2-0abdfd715970bd0ef7d5574daa0e6d0b" name="zv7uPVfex6" 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="zv7uPVfex6" 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.
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="P5FgZ96RQC" 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="P5FgZ96RQC" 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="P5FgZ96RQC" 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="v9ADgAGUlc" 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="v9ADgAGUlc" 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="v9ADgAGUlc" 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="v9ADgAGUlc" 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="v9ADgAGUlc" 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="v9ADgAGUlc" 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>