Yii2 Chip Select Widget

This widget can be used in place of an input field to give the user a graphical way to select/deselect items.

Options

The ChipSelect widget offers the following options:

computy\chipselect\widgets\ChipSelect::widget([
    /*
    The ID is only used if no ID is set in the $containerOptions, in order to generate a container ID.
    If this is not set, this defaults to chip_select_ and a random integer.
    */
    'id' => 'my_cool_input',
    /*
    The name for the hidden inputs generated by the widget. '[]' is automatically appended to it.
    This must be set, otherwise an InvalidConfigException is thrown.
    */
    'name' => 'myCoolInput',
    /*
    The values to provide for the chip select, provided as a mapping from the actual value to the displayed name.
    */
    'data' => [
        1 => 'Option One',
        'two' => 'Option Two'
    ],
    /*
    The initial selected options.
    */
    'value' => [1],
    /*
    JavaScript logic to run whenever a chip is selected or deselected.
    This can alternatively be a `yii\web\JsExpression`.
    */
    'jsOnChange' => <<<JS
    () => {
        const selected = $('input[name="myCoolInput[]"]:not(:disabled)')
            .toArray()
            .map((elem) => elem.val())
            .join(', ')
        console.log(selected)
    }
    JS,
    /*
    HTML options to apply to the selectable items.
    */
    'options' => [
        'class' => 'my-chip'
    ],
    /*
    HTML options to apply to the hidden inputs.
    */
    'inputOptions' => [
        'class' => 'my-secret-input'
    ],
    /*
    HTML options to apply to the object containing the chip select.
    */
    'containerOptions' => [
        'class' => 'my-chipselect-container'
    ],
])

Styling

All chips can be accessed through the CSS class .cpty-select-chip.

Selected and unselected versions of chips get a .chip-selected or .chip-unselected class respectively.

Alternatively, the containers holding the chips can be accessed using .unselected-container and .selected-container.