ColorInput Widget ColorInput.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The ColorInput widget is an advanced ColorPicker input styled for Bootstrap. It uses a combination of the HTML5 color input and/or the JQuery Spectrum Plugin for rendering the color picker. You can use the Native HTML5 color input by setting the useNative option to true. Else, the Spectrum plugin polyfills for unsupported browser versions. The widget enhances the plugin and color input with various features including the following:

  • Specially styled for Bootstrap 3.0 with customizable caption showing the output of the control.
  • Ability to prepend and append addons.
  • Allow the input to be changed both via the control or the text box.
  • The Spectrum plugin automatically polyfills the HTML5 color input for unsupported browser versions.

Important

This widget can be also installed in isolation outside this bundle if needed. In addition to using via \kartik\widgets namespace, this widget can be also installed from the yii2-widget-colorinput repository and can also be accessed via \kartik\color\ColorInput namespace.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the ColorInput widget configuration are:
  • useNative: boolean whether to use the native HTML5 color picker input. If set to false, it will use the Spectrum JQuery plugin to render the picker. Refer plugin documentation for details. This defaults to false.

  • polyFill: boolean whether to automatically polyfill for the HTML5 color input in an unsupported browser when you have set useNative to true. This defaults to false.

  • showDefaultPalette: boolean whether to show a default palette of colors. This defaults to true. Set this to false to show only your own custom palette.

  • width: string the width in 'px' or '%' of the color picker input

  • size: string the bootstrap SIZE modifier. One of 'lg', 'md', 'sm'

  • html5Options: array the HTML attributes for the color picker input

  • options: array the HTML attributes for the caption input displaying the color value

  • html5Container: array the HTML attributes for the container enclosing the color control and caption

  • noSupport: string/boolean the message shown for unsupported browser. If set to false will not be displayed.

  • noSupportOptions: array the HTML attributes for the message container displaying unsupported browser message

  • pluginOptions: array the plugin settings/options for the JQuery Spectrum Plugin. Refer plugin documentation for details.

  • pluginEvents: array the JQuery Spectrum Plugin events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation for details. For example:

    pluginEvents = [
        "change" => "function() { log("change"); }"
    ];
    

Usage with ActiveForm and model. Check the model validation (e.g. null value or string > 7 characters).
With a model and without ActiveForm
Usage without a model and with an initial value
A readonly colorinput input and with an initial value
A disabled colorinput input and with an initial value
use kartik\widgets\ColorInput

// Usage with ActiveForm and model. Check the model validation (e.g. null value or string > 7 characters).
echo $form->field($model, 'color')->widget(ColorInput::classname(), [
    'options' => ['placeholder' => 'Select color ...'],
]);


// With a model and without ActiveForm
echo '<label class="control-label">Select Color</label>';
echo ColorInput::widget([
    'model' => $model, 
    'attribute' => 'color_1',
    'options' => ['placeholder' => 'Select color ...']
]);

// Usage without a model and with an initial value
echo '<label class="control-label">Dress Color</label>';
echo ColorInput::widget([
    'name' => 'dress_color',
    'value' => '#8a2f13'
]);


// A readonly colorinput input and with an initial value
echo '<label class="control-label">Favorite Color</label>';
echo ColorInput::widget([
    'name' => 'color_5',
    'value' => '#7f1eab',
    'options' => ['readonly' => true]
]);

// A disabled colorinput input and with an initial value
echo '<label class="control-label">Car Color</label>';
echo ColorInput::widget([
    'name' => 'color_6',
    'value' => '#31af56',
    'options' => ['disabled' => true],
    'html5Options' => ['disabled' => true]
]);

Use HTML5 native color input (not supported by all browsers) by setting useNative to true.

Note

Using a native HTML5 color input should eliminate the jquery plugin load overhead. Also note, in this case, if the Spectrum plugin assets are already loaded on the page, it will polyfill for input [type=color] in an unsupported browser. You can force the polyfill behavior by setting polyfill = true (whenever you have set useNative to true).
Control the size of the widget and set an initial value
Use a native control and control the width of the picker control, center the caption, and set default value
Add input group addons
use kartik\widgets\ColorInput

// Use HTML5 native color input (not supported by all browsers). This should eliminate the 
// jquery plugin load overhead. (Note: If the Spectrum plugin is loaded elsewhere on the page, 
// it will polyfill for <code>input [type=color]</code> in an unsupported browser.)
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_11',
    'useNative' => true,
    'options' => ['placeholder' => 'Choose your color ...']
]);

// Control the size of the widget and set an initial value
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_12',
    'size' => 'lg',
    'options' => ['placeholder' => 'Choose your color ...']
]);

// Use a native control and control the width of the picker control, 
// center the caption, and set default value
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_13',
    'value' => '#a814fe',
    'useNative' => true,
    'width' => '75%',
    'options' => ['placeholder' => 'Choose your color ...', 'class'=>'text-center'],
]);

// Add input group addons
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_14',
    'options' => ['placeholder' => 'Choose your color ...'],
    'addon' => ['append' => ['content'=>Html::button('Go', ['class' => 'btn btn-primary']), 'asButton'=>true]]
]);

The following functionalities will work only if you have set the useNative property to false that will enable using the Spectrum JQuery plugin.

Change your preferred color format (one of hex, hex6, rgb, hsl, name, or NULL)
Color format that depends on input (try changing formats with the text box)
Set a readonly control to prevent keyboard access that can be controlled by mouse using the picker
Configure the display of various plugin components and use a custom palette.
use kartik\widgets\ColorInput

// Change your preferred color format (one of hex, hex6, rgb, hsl, name, or empty string)
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_30',
    'value' => 'hsla(96, 31%, 34%, 0.83)',
    'options' => ['placeholder' => 'Choose your color ...'],
    'pluginOptions'=> ['preferredFormat' => 'hsl']
]);

// Color format that depends on input (try changing formats with the text box)
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_31',
    'value' => 'orange',
    'options' => ['placeholder' => 'Choose your color ...'],
    'pluginOptions'=> ['preferredFormat' => '']
]);

// Set a readonly control to prevent keyboard access that can be controlled by mouse using the picker
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_32',
    'value' => 'rgb(100, 50, 200)',
    'options' => ['placeholder' => 'Choose your color ...', 'readonly' => true],
    'pluginOptions' => [
        'showInput' => false,
        'preferredFormat' => 'rgb'
    ]
]);

// Configure the display of various plugin components and use a custom palette.
echo '<label class="control-label">Choose Color</label>';
echo ColorInput::widget([
    'name' => 'color_33',
    'value' => 'red',
    'showDefaultPalette' => false,
    'options' => ['placeholder' => 'Choose your color ...'],
    'pluginOptions' => [
        'showInput' => true,
        'showInitial' => true,
        'showPalette' => true,
        'showPaletteOnly' => true,
        'showSelectionPalette' => true,
        'showAlpha' => false,
        'allowEmpty' => false,
        'preferredFormat' => 'name',
        'palette' => [
            [
                "white", "black", "grey", "silver", "gold", "brown", 
            ],
            [
                "red", "orange", "yellow", "indigo", "maroon", "pink"
            ],
            [
                "blue", "green", "violet", "cyan", "magenta", "purple", 
            ],
        ]
    ]
]);