ColorInput supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the ColorInput::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set ColorInput::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set ColorInput::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set ColorInput::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-colorinput extension can be installed automatically or manually using one of these options:

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

"kartik-v/yii2-widget-colorinput": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• useNative: boolean whether to use the native HTML5 color picker input. If set to false, it will use a text input to initialize (unless the type property is overridden). It will also in this case use the Spectrum JQuery plugin to render the picker. Refer plugin documentation for details. 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

• disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

• readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

• 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"); }"
  ];
  

use kartik\color\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',
    'disabled' => true
]);

use kartik\color\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]]
]);

use kartik\color\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", 
            ],
        ]
    ]
]);