Example 1 - pretty chechboxes & radio buttons with default settings
$form = new Form('plugins-pretty-checkbox-form-1', 'horizontal');
$form->addCheckbox('chk-group-1', 'choice one', 'value 1');
$form->addCheckbox('chk-group-1', 'choice two', 'value 2', 'checked=checked');
$form->addCheckbox('chk-group-1', 'choice three', 'value 3', 'checked=checked');
$form->printCheckboxGroup('chk-group-1', 'Check please: ', true, 'required');
$form->addRadio('radio-group-1', 'choice one', 'value 1');
$form->addRadio('radio-group-1', 'choice two', 'value 2', 'checked=checked');
$form->addRadio('radio-group-1', 'choice three', 'value 3');
$form->printRadioGroup('radio-group-1', 'Choose one please', true, 'required');
$form->addPlugin('pretty-checkbox', '#plugins-pretty-checkbox-form-1');<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Check please: <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-1_0" name="chk-group-1[]" value="value 1" class="form-check-input">
<label for="chk-group-1_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-1_1" name="chk-group-1[]" value="value 2" checked="checked" class="form-check-input">
<label for="chk-group-1_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-1_2" name="chk-group-1[]" value="value 3" checked="checked" class="form-check-input">
<label for="chk-group-1_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>
<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Choose one please <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-1_0" name="radio-group-1" value="value 1" required class="form-check-input">
<label for="radio-group-1_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-1_1" name="radio-group-1" value="value 2" required checked="checked" class="form-check-input">
<label for="radio-group-1_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-1_2" name="radio-group-1" value="value 3" required class="form-check-input">
<label for="radio-group-1_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>Example 2 - Custom style, color, filled & bigger size
$form = new Form('plugins-pretty-checkbox-form-2', 'horizontal');
$form->addCheckbox('chk-group-2', 'choice one', 'value 1');
$form->addCheckbox('chk-group-2', 'choice two', 'value 2', 'checked=checked');
$form->addCheckbox('chk-group-2', 'choice three', 'value 3', 'checked=checked');
$form->printCheckboxGroup('chk-group-2', 'Check please: ', true, 'required');
$form->addRadio('radio-group-2', 'choice one', 'value 1');
$form->addRadio('radio-group-2', 'choice two', 'value 2', 'checked=checked');
$form->addRadio('radio-group-2', 'choice three', 'value 3');
$form->printRadioGroup('radio-group-2', 'Choose one please', true, 'required');
$options = [
'checkboxStyle' => 'curve',
'color' => 'info',
'fill' => 'fill',
'size' => 'bigger'
];
$form->addPlugin('pretty-checkbox', '#plugins-pretty-checkbox-form-2', 'default', $options);<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Check please: <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-2_0" name="chk-group-2[]" value="value 1" class="form-check-input">
<label for="chk-group-2_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-2_1" name="chk-group-2[]" value="value 2" checked="checked" class="form-check-input">
<label for="chk-group-2_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-2_2" name="chk-group-2[]" value="value 3" checked="checked" class="form-check-input">
<label for="chk-group-2_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>
<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Choose one please <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-2_0" name="radio-group-2" value="value 1" required class="form-check-input">
<label for="radio-group-2_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-2_1" name="radio-group-2" value="value 2" required checked="checked" class="form-check-input">
<label for="radio-group-2_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-2_2" name="radio-group-2" value="value 3" required class="form-check-input">
<label for="radio-group-2_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>Example 3 - Check icons, no borders & smooth animations
$form = new Form('plugins-pretty-checkbox-form-3', 'horizontal');
$form->addCheckbox('chk-group-3', 'choice one', 'value 1');
$form->addCheckbox('chk-group-3', 'choice two', 'value 2', 'checked=checked');
$form->addCheckbox('chk-group-3', 'choice three', 'value 3', 'checked=checked');
$form->printCheckboxGroup('chk-group-3', 'Check please: ', true, 'required');
$form->addRadio('radio-group-3', 'choice one', 'value 1');
$form->addRadio('radio-group-3', 'choice two', 'value 2', 'checked=checked');
$form->addRadio('radio-group-3', 'choice three', 'value 3');
$form->printRadioGroup('radio-group-3', 'Choose one please', true, 'required');
$options = [
'icon' => 'bi bi-check-lg',
'plain' => 'plain',
'animations' => 'smooth'
];
$form->addPlugin('pretty-checkbox', '#plugins-pretty-checkbox-form-3', 'default', $options);<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Check please: <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-3_0" name="chk-group-3[]" value="value 1" class="form-check-input">
<label for="chk-group-3_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-3_1" name="chk-group-3[]" value="value 2" checked="checked" class="form-check-input">
<label for="chk-group-3_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-3_2" name="chk-group-3[]" value="value 3" checked="checked" class="form-check-input">
<label for="chk-group-3_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>
<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Choose one please <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-3_0" name="radio-group-3" value="value 1" required class="form-check-input">
<label for="radio-group-3_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-3_1" name="radio-group-3" value="value 2" required checked="checked" class="form-check-input">
<label for="radio-group-3_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-3_2" name="radio-group-3" value="value 3" required class="form-check-input">
<label for="radio-group-3_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>Example 4 - Toggle elements with On / Off states
The checkboxes are configured individually with data-attributes on each one, whereas the radio buttons use the main plugin settings.$form = new Form('plugins-pretty-checkbox-form-4', 'horizontal');
$form->addCheckbox('chk-group-4', '', 'value 1', 'data-toggle=true, data-on-label=On, data-off-label=Off, data-on-icon=bi bi-bell-fill, data-off-icon=bi bi-bell-slash-fill, data-on-color=danger-o, data-plain=plain, data-size=bigger');
$form->addCheckbox('chk-group-4', '', 'value 2', 'data-toggle=true, data-on-label=Playing, data-off-label=Paused, data-on-icon=bi bi-play-circle, data-off-icon=bi bi-pause-circle, data-on-color=primary-o, data-plain=plain, data-size=bigger');
$form->addCheckbox('chk-group-4', '', 'value 3', 'data-toggle=true, data-on-label=Preview On, data-off-label=Preview Off, data-on-icon=bi bi-eye-fill, data-off-icon=bi bi-eye-slash-fill, data-on-color=info-o, data-plain=plain, data-size=bigger');
$form->printCheckboxGroup('chk-group-4', 'Toggle checkboxes: ', true);
$form->addRadio('radio-group-4', 'choice one', 'value 1');
$form->addRadio('radio-group-4', 'choice two', 'value 2', 'checked=checked');
$form->addRadio('radio-group-4', 'choice three', 'value 3');
$form->printRadioGroup('radio-group-4', 'Choose one please', true, 'required');
$options = [
'icon' => 'bi bi-check-lg',
'plain' => 'plain',
'animations' => 'smooth'
];
$form->addPlugin('pretty-checkbox', '#plugins-pretty-checkbox-form-4', 'default', $options);<div class="row mb-3">
<label class="main-label main-label-inline col-sm-4 col-form-label">
Toggle checkboxes:
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-4_0" name="chk-group-4[]" value="value 1" data-toggle="true" data-on-label="On" data-off-label="Off" data-on-icon="bi bi-bell-fill pe-4" data-off-icon="bi bi-bell-slash-fill pe-4" data-on-color="danger-o" data-plain="plain" data-size="bigger" checked class="form-check-input">
<label for="chk-group-4_0" class="form-check-label"></label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-4_1" name="chk-group-4[]" value="value 2" data-toggle="true" data-on-label="Playing" data-off-label="Paused" data-on-icon="bi bi-play-circle pe-4" data-off-icon="bi bi-pause-circle pe-4" data-on-color="primary-o" data-plain="plain" data-size="bigger" class="form-check-input">
<label for="chk-group-4_1" class="form-check-label"></label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="chk-group-4_2" name="chk-group-4[]" value="value 3" data-toggle="true" data-on-label="Preview On" data-off-label="Preview Off" data-on-icon="bi bi-eye-fill pe-4" data-off-icon="bi bi-eye-slash-fill pe-4" data-on-color="info-o" data-plain="plain" data-size="bigger" class="form-check-input">
<label for="chk-group-4_2" class="form-check-label"></label>
</div>
</div>
</div>
<div class="row mb-3">
<label required class="main-label main-label-inline col-sm-4 col-form-label">
Choose one please <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-4_0" name="radio-group-4" value="value 1" required class="form-check-input">
<label for="radio-group-4_0" class="form-check-label">
choice one
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-4_1" name="radio-group-4" value="value 2" required checked="checked" class="form-check-input">
<label for="radio-group-4_1" class="form-check-label">
choice two
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="radio-group-4_2" name="radio-group-4" value="value 3" required class="form-check-input">
<label for="radio-group-4_2" class="form-check-label">
choice three
</label>
</div>
</div>
</div>