Color

Choose colours using an interactive colour palette.

Dependencies

This helper requires PulsarFormComponent to be included in your JavaScript.

Pick colour

#

Basic usage

Twig

{{
  form.color({
    'label': 'Pick colour',
    'id': 'color-a1'
  })
}}

HTML

<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.

Pick colour

#

Twig

{{
  form.color({
    'label': 'Pick colour',
    'id': 'color-a2',
    'disabled': true
  })
}}

HTML

<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>