kartik-v/yii2-widget-colorinput An enhanced Yii 2 widget encapsulating the HTML 5 color input (sub repo split from yii2-widgets)


Krajee Logo
yii2-widget-colorinput Donate

Stable Version Unstable Version License Total Downloads Monthly Downloads Daily Downloads

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.

  • Specially styled for Bootstrap 3.x and 4.x 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.

NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.


The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.

To install, either run

$ php composer.phar require kartik-v/yii2-widget-colorinput "*"

or add

"kartik-v/yii2-widget-colorinput": "*"

to the require section of your composer.json file.

Release Updates

NOTE: Refer the CHANGE LOG for details on release wise changes.


You can refer detailed documentation and demos on usage of the extension.


use kartik\color\ColorInput;

// Usage with ActiveForm and model
echo $form->field($model, 'color')->widget(ColorInput::classname(), [
    'options' => ['placeholder' => 'Select color ...'],

// With model & without ActiveForm
echo '<label>Select Color</label>';
echo ColorInput::widget([
    'model' => $model,
    'attribute' => 'saturation',


yii2-widget-colorinput is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.


Change Log: yii2-widget-colorinput

Version 1.0.6

Date: 23-Oct-2020

  • (bug #40, #41): Correct span tag closure in palette rendering.
  • (enh #39): Update Azerbaijani Translations.
  • (enh #38): Update Slovak Translations.
  • (enh #31): Add Lithuanian Translations.
  • (enh #25): Add Thai Translations.
  • (bug #24): Fix js error "color is null".

Version 1.0.5

Date: 12-Sep-2018

  • Refactor code to consolidate Trait use.

Version 1.0.4

Date: 06-Sep-2018

  • Add github contribution and issue / PR templates.
  • (kartik-v/yii2-krajee-base#94): Refactor code and consolidate / optimize properties within traits.
  • Update to support Bootstrap 4.x
  • Reorganize all source code in src directory.

Version 1.0.3

Date: 14-Jan-2016

  • (enh #22): Add branch alias for dev-master latest release.
  • (enh #21): Enhancements for PJAX based reinitialization. Complements enhancements in kartik-v/yii2-krajee-base#52 and kartik-v/yii2-krajee-base#53.
  • (bug #20): Fix minified JS spectrum-kv.min.js.
  • (enh #19): Update Ukranian Translations.
  • (enh #18): Add Ukranian Translations.

Version 1.0.2

Date: 27-Dec-2015

  • (enh #16): Various enhancements for input type recognition and CSS.
    • input type property will be defaulted to text if useNative is false and will default to color if useNative is true
    • input type property is now made configurable
    • plugin loading indicator will be shown until spectrum plugin loads - if pluginLoading is true
    • will be complemented by enhancements kartik-v/yii2-krajee-base#50, kartik-v/yii2-krajee-base#51
  • (enh #15): Correct comma in Japanese translation.

Version 1.0.1

Date: 22-Nov-2015

  • (enh #12): Implement theming for Krajee style.
  • (enh #11): Implement translations and locales.
  • (enh #10): Update to latest version of spectrum plugin.
  • (enh #4): Optimize the Javascript code for HTML5 input change.

Version 1.0.0

Date: 08-Nov-2014


GitHub Stars
GitHub Forks



v1.0.6 is the latest of 7 releases

BSD-3-Clause license
33 github stars & 18 github forks
910 downloads in the last day
40207 downloads in the last 30 days
2199057 total downloads