Skip to content
Color picker widget for Yii2 framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Color picker widget for Yii2

yii2-iro is a widget to choose a color. You can use it in an ActiveForm like any other InputWidget in the Yii 2.0 PHP Framework.

yii2-iro is a wrapper around the excellent iro.js JavaScript color picker, created by James Daniel.

yii2-iro can appear in two modes: inline (directly in the page) or in a popup-dialog that opens when a colored button is clicked.

A demonstration of Yii2-iro is here.


Install yii2-iro in the usual way with Composer. Add the following to the require section of your composer.json file:

"sjaakp/yii2-iro": "*"

or run:

composer require sjaakp/yii2-iro

You can manually install yii2-iro by downloading the source in ZIP-format.

Using yii2-iro

Use yii2-iro just like you would use any other a InputWidget. For instance, in an ActiveForm you might have something like:

    use sjaakp\iro\IroWidget;
<?php $form = ActiveForm::begin([
    // ...options...
]); ?>

    <?= $form->field($model, 'name') ?>
    <?= $form->field($model, 'favourite_color')->widget() ?>

<?php $form = ActiveForm::end(); ?>

To render yii2-iro outside of an ActiveForm we could use something like:

use sjaakp\iro\IroWidget;
<?= IroWidget::widget([
    'name' => 'iro',
    'value' => '#00ff00',
    'popup' => false
    // ...
]) ?>;


The yii2-iro widget has all the options of a InputWidget, plus the following:


array Options for the underlying iro.js color picker. Default: [].


boolean Determines the appearance of the yii2-iro widget.

  • false The widget appears inline, directly on the page.

  • true The widget appears as a colored button. Clicking it shows the color button in a modal dialog.

Default: true.


string One of the color formats available to the iro.js color picker. Default: 'hexString'.

You can’t perform that action at this time.