Example 1 - LCSwitch plugin globally enabled
All the checkboxes / radio buttons share the same texts and colors$form = new Form('plugins-lcswitch-form-1', 'horizontal');
$form->addCheckbox('my-checkbox-group', 'Checkbox 1', 'value-1');
$form->addCheckbox('my-checkbox-group', 'Checkbox 2', 'value-2', 'checked');
$form->printCheckboxGroup('my-checkbox-group', '', false, 'data-lcswitch=true, data-ontext=Yes, data-offtext=No, data-oncolor=#8058A5');
$form->addRadio('my-radio-group', 'Radio 1', 'value-1');
$form->addRadio('my-radio-group', 'Radio 2', 'value-2', 'checked');
$form->printRadioGroup('my-radio-group', 'Main label:', false, 'data-lcswitch=true, data-ontext=True, data-offtext=False, data-oncss=bg-info');
<div class="row mb-3">
<div class="col-sm-offset-4 col-sm-8">
<div class="form-check">
<input type="checkbox" id="my-checkbox-group_0" name="my-checkbox-group[]" value="value-1" data-ontext="Yes" data-offtext="No" data-oncolor="#8058A5" class="form-check-input">
<label for="my-checkbox-group_0" class="form-label">
Checkbox 1
</label>
</div>
<div class="form-check">
<input type="checkbox" id="my-checkbox-group_1" name="my-checkbox-group[]" value="value-2" data-ontext="Yes" data-offtext="No" data-oncolor="#8058A5" checked class="form-check-input">
<label for="my-checkbox-group_1" class="form-label">
Checkbox 2
</label>
</div>
</div>
</div>
<div class="row mb-3">
<label data-has-switch="true" data-ontext="True" data-offtext="False" data-oncss="bg-info" class="main-label col-sm-4 col-form-label">
Main label:
</label>
<div class="col-sm-8">
<div class="form-check">
<input type="radio" id="my-radio-group_0" name="my-radio-group" value="value-1" data-ontext="True" data-offtext="False" data-oncss="bg-info" data-has-switch="true" data-ontext="True" data-offtext="False" data-oncss="bg-info" class="main-label col-sm-4 col-form-label">
<label for="my-radio-group_0" class="form-label">
Radio 1
</label>
</div>
<div class="form-check">
<input type="radio" id="my-radio-group_1" name="my-radio-group" value="value-2" data-ontext="True" data-offtext="False" data-oncss="bg-info" data-has-switch="true" data-ontext="True" data-offtext="False" data-oncss="bg-info" class="main-label col-sm-4 col-form-label">
<label for="my-radio-group_1" class="form-label">
Radio 2
</label>
</div>
</div>
</div>
Example 2 - LCSwitch plugin individually enabled
Choose your on/off texts and colors individually for each checkbox / radio button$form = new Form('plugins-lcswitch-form-2', 'horizontal');
$form->addCheckbox('my-checkbox-group-2', 'Checkbox 1', 'value-1', 'data-ontext=A, data-offtext=B, data-oncolor=#44DBD1, checked');
$form->addCheckbox('my-checkbox-group-2', 'Checkbox 2 with gradient', 'value-2', 'data-ontext=Y, data-offtext=N, data-oncolor=linear-gradient(140deg\, #fabe1c 35%\, #f88c21), checked');
$form->printCheckboxGroup('my-checkbox-group-2', '', false, 'data-lcswitch=true');
$form->addRadio('my-radio-group-2', 'Radio 1', 'value-1', 'data-ontext=C, data-offtext=D, data-oncss=bg-primary');
$form->addRadio('my-radio-group-2', 'Radio 2', 'value-2', 'data-ontext=1, data-offtext=0, data-oncss=bg-dark, checked');
$form->printRadioGroup('my-radio-group-2', 'Main label:', false, 'data-lcswitch=true');
<div class="row mb-3">
<div class="col-sm-offset-4 col-sm-8">
<div class="form-check">
<input type="checkbox" id="my-checkbox-group-2_0" name="my-checkbox-group-2[]" value="value-1" data-ontext="A" data-offtext="B" data-oncolor="#44DBD1" checked class="form-check-input">
<label for="my-checkbox-group-2_0" class="form-label">
Checkbox 1
</label>
</div>
<div class="form-check">
<input type="checkbox" id="my-checkbox-group-2_1" name="my-checkbox-group-2[]" value="value-2" data-ontext="Y" data-offtext="N" data-oncolor="linear-gradient(140deg, #fabe1c 35%, #f88c21)" checked class="form-check-input">
<label for="my-checkbox-group-2_1" class="form-label">
Checkbox 2 with a nice gradient
</label>
</div>
</div>
</div>
<div class="row mb-3">
<label data-has-switch="true" class="main-label col-sm-4 col-form-label">
Main label:
</label>
<div class="col-sm-8">
<div class="form-check">
<input type="radio" id="my-radio-group-2_0" name="my-radio-group-2" value="value-1" data-ontext="C" data-offtext="D" data-oncss="bg-primary" class="form-check-input">
<label for="my-radio-group-2_0" class="form-label">
Radio 1
</label>
</div>
<div class="form-check">
<input type="radio" id="my-radio-group-2_1" name="my-radio-group-2" value="value-2" data-ontext="1" data-offtext="0" data-oncss="bg-dark" checked class="form-check-input">
<label for="my-radio-group-2_1" class="form-label">
Radio 2
</label>
</div>
</div>
</div>