Example 1 - color code inside the input field
$form = new Form('plugins-colorpicker-form-1', 'horizontal');
$form->addInput('text', 'my-color', '', 'Pick a color:', 'data-colorpicker=true');
<div class="row mb-3">
<label for="my-color" class="col-sm-4 col-form-label">
Pick a color:
</label>
<div class="col-sm-8">
<input id="my-color" name="my-color" type="text" value="" data-colorpicker="true" class="form-control">
</div>
</div>
Example 2 - Colorpicker with interaction buttons to change the color format
$form = new Form('plugins-colorpicker-form-2', 'horizontal');
$form->addInput('text', 'my-color-2', '', 'Pick a color:', 'data-colorpicker=true, data-interaction-hex=true, data-interaction-rgba=true, data-interaction-hsla=true, data-interaction-input=true');
<div class="row mb-3">
<label for="my-color-2" class="col-sm-4 col-form-label">
Pick a color:
</label>
<div class="col-sm-8">
<input id="my-color-2" name="my-color-2" type="text" value="" data-colorpicker="true" data-interaction-hex="true" data-interaction-rgba="true" data-interaction-hsla="true" data-interaction-input="true" class="form-control">
</div>
</div>
Example 3 - Colorpicker with no opacity options, no save button
$form = new Form('plugins-colorpicker-form-3', 'horizontal');
$form->addInput('text', 'my-color-3', '', 'Pick a color:', 'data-colorpicker=true, data-lock-opacity=true, data-interaction-save=false');
<div class="row mb-3">
<label for="my-color-3" class="col-sm-4 col-form-label">
Pick a color:
</label>
<div class="col-sm-8">
<input id="my-color-3" name="my-color-3" type="text" value="" data-colorpicker="true" data-lock-opacity="true" data-interaction-save="false" class="form-control">
</div>
</div>
Example 4 - Colorpicker with default options and monolith theme
$form = new Form('plugins-colorpicker-form-4', 'horizontal');
$form->addInput('text', 'my-color-4', '', 'Pick a color:', 'data-colorpicker=true, data-theme=monolith');
<div class="row mb-3">
<label for="my-color-4" class="col-sm-4 col-form-label">
Pick a color:
</label>
<div class="col-sm-8">
<input id="my-color-4" name="my-color-4" type="text" value="" data-colorpicker="true" data-theme="monolith" class="form-control">
</div>
</div>