Color
Supported products
- Central CMS
- Central Forms
- Central Connect
Choose colours using an interactive colour palette.
Dependencies
This helper requires PulsarFormComponent
to be included in your JavaScript.
#
Basic usage
- Twig
- HTML
{{
form.color({
'label': 'Pick colour',
'id': 'color-a1'
})
}}
<div class="form__group colorpicker js-colorpicker">
<label for="color-a1" class="control__label">Pick colour</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon">#</span>
<input id="color-a1" type="text" class="form__control" />
</div>
</div>
</div>
Helper options
You can configure this helper using the common helper options.
Disabled state
Add the 'disabled': true
option to disable the field on load. See the disabling elements guide for more information about how to disable elements via javascript. Provide help text or information within the UI where possible to explain why elements are disabled.
#
- Twig
- HTML
{{
form.color({
'label': 'Pick colour',
'id': 'color-a2',
'disabled': true
})
}}
<div class="form__group colorpicker js-colorpicker">
<label for="color-a2" class="control__label">Pick colour</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon">#</span>
<input id="color-a2" disabled type="text" class="form__control is-disabled" />
</div>
</div>
</div>