FormsBootstrap
A Laravel library to generate forms based on Laravel Collective Forms & HTML, Boostrap 5 CSS Framework, RichText editor, and Icons provided by FontAwesome. Current version: 3.1.1. Project on GitHub. Project on Packagist. Manages also results inputs of packages DateRangePickerHelper, Uploader, and Tags input. Includes form management and validation. This demosite sources available here.
Checkboxes and radio buttons
{!! Form::bsCheckbox([
'name' => 'os', //name of checkboxes
'values' => ['mac' => 'MacOs','windows' => 'Windows', 'linux' => 'Linux',
'vms' => 'Vms','unix' => 'Unix'], //values of checkboxes
'checkedvalues' => ['vms', 'mac'], // array keys of selected values
'mainlabel' => 'Operating system' // Label for checkboxes list
]) !!}
{!! Form::bsRadio([
'name' => 'priority',
'values' => ['lowest' => 'Lowest','low' => 'Low', 'medium' => 'Medium', 'high' => 'High','highest' => 'Highest'],
'checkedvalue' => 'medium', //since only one radio button can be selected, string value
'mainlabel' => 'Priority'
]) !!}
{!! Form::bsCheckbox([
'name' => 'languages',
'values' => ['en' => 'English', 'fr' => 'Français', 'de' => 'Deutsch', 'it' => 'Italiano',
'es' => 'Español', 'pt' => 'Português'],
'checkedvalues' => ['fr'],
'mainlabel' => 'Languages',
'switch' => true, // Bootstrap switch values
'required' => true // at least one value must be selected
]) !!}
{!! Form::bsCheckbox([
'name' => 'conditions',
'values' => ['accepted' => 'I agree to terms and conditions'],
'required' => true,
'invalid-feedback' => "You must agree before submitting." // this message will be displayed
//if no value selected
]) !!}
Output:
<div class="mb-3 resetcheck" id="fg-os[]">
<label for="" class="form-label">Operating system</label>
<div class="form-check form-check-inline">
<input type="checkbox" name="os[]" value="mac" id="os_mac" class="form-check-input" checked="checked" defaultchecked="defaultchecked" />
<label for="os_mac" class="form-check-label">MacOs</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="os[]" value="windows" id="os_windows" class="form-check-input" />
<label for="os_windows" class="form-check-label">Windows</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="os[]" value="linux" id="os_linux" class="form-check-input" />
<label for="os_linux" class="form-check-label">Linux</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="os[]" value="vms" id="os_vms" class="form-check-input" checked="checked" defaultchecked="defaultchecked" />
<label for="os_vms" class="form-check-label">Vms</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="os[]" value="unix" id="os_unix" class="form-check-input" />
<label for="os_unix" class="form-check-label">Unix</label>
</div>
</div>
<div class="mb-3 resetcheck" id="fg-priority">
<label for="" class="form-label">Priority</label>
<div class="form-check form-check-inline">
<input type="radio" name="priority" value="lowest" id="priority_lowest" class="form-check-input" />
<label for="priority_lowest" class="form-check-label">Lowest</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="priority" value="low" id="priority_low" class="form-check-input" />
<label for="priority_low" class="form-check-label">Low</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="priority" value="medium" id="priority_medium" class="form-check-input" checked="checked" defaultchecked="defaultchecked" />
<label for="priority_medium" class="form-check-label">Medium</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="priority" value="high" id="priority_high" class="form-check-input" />
<label for="priority_high" class="form-check-label">High</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="priority" value="highest" id="priority_highest" class="form-check-input" />
<label for="priority_highest" class="form-check-label">Highest</label>
</div>
</div>
<div class="mb-3 selcheck resetcheck" id="fg-languages[]">
<label for="" class="form-label">Languages</label>
<div class="form-check form-check-inline form-switch verify-check">
<input type="checkbox" name="languages[]" value="en" id="languages_en" class="form-check-input" role="switch" />
<label for="languages_en" class="form-check-label">English</label>
</div>
<div class="form-check form-check-inline form-switch verify-check">
<input type="checkbox" name="languages[]" value="fr" id="languages_fr" class="form-check-input" role="switch" checked="checked" defaultchecked="defaultchecked" />
<label for="languages_fr" class="form-check-label">Français</label>
</div>
<div class="form-check form-check-inline form-switch verify-check">
<input type="checkbox" name="languages[]" value="de" id="languages_de" class="form-check-input" role="switch" />
<label for="languages_de" class="form-check-label">Deutsch</label>
</div>
<div class="form-check form-check-inline form-switch verify-check">
<input type="checkbox" name="languages[]" value="it" id="languages_it" class="form-check-input" role="switch" />
<label for="languages_it" class="form-check-label">Italiano</label>
</div>
<div class="form-check form-check-inline form-switch verify-check">
<input type="checkbox" name="languages[]" value="es" id="languages_es" class="form-check-input" role="switch" />
<label for="languages_es" class="form-check-label">Español</label>
</div>
<div class="form-check form-check-inline form-switch verify-check">
<input type="checkbox" name="languages[]" value="pt" id="languages_pt" class="form-check-input" role="switch" />
<label for="languages_pt" class="form-check-label">Português</label>
</div>
<div class="invalid-feedback">Select at least one of the above values</div>
</div>
<div class="mb-3 selcheck resetcheck" id="fg-conditions[]">
<div class="form-check form-check-inline verify-check">
<input type="checkbox" name="conditions[]" value="accepted" id="conditions_accepted" class="form-check-input" />
<label for="conditions_accepted" class="form-check-label">I agree to terms and conditions</label>
</div>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>