JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<link rel="stylesheet" href="//isteven.github.io/angular-multi-select/css/isteven-multi-select.css">
<script src="//isteven.github.io/angular-multi-select/js/libs/isteven-multi-select.js"></script>
<div ng-app="myApp">
    <div ng-controller="demoMinimum">
        <div><span>Browsers List</span></div>
        <div
            isteven-multi-select
            input-model="webBrowsersGrouped"
            output-model="outputBrowsers"
            button-label="icon name"
            class="group-select-disabled"
            item-label="icon name maker"
            tick-property="ticked"
            helper-elements="none all"
            disable-property="disabled"
            group-property="msGroup"
            selection-mode="single"
        >
        </div>
    </div>
</div>

CSS

.group-select-disabled > .multiSelect .disabled,
.group-select-disabled > .multiSelect .disabled:hover,
.group-select-disabled > .multiSelect .disabled label input:hover ~ span {
    color: #000000 !important;
    cursor: default !important;
}

JavaScript

var myApp = angular.module('myApp', ['isteven-multi-select'])

myApp.controller('demoMinimum', ['$scope', function($scope) {

    $scope.webBrowsersGrouped = [{
            name: '<strong>Modern Web Browsers</strong>',
            msGroup: true,
            disabled: true
        },
        {
            icon: '<img  src="https://cdn1.iconfinder.com/data/icons/fatcow/32/opera.png" />',
            name: 'Opera',
            maker: '(Opera Software)',
            ticked: false
        },
        {
            icon: '<img  src="https://cdn1.iconfinder.com/data/icons/fatcow/32/internet_explorer.png" />',
            name: 'Internet Explorer',
            maker: '(Microsoft)',
            ticked: false
        },
        {
            icon: '<img  src="https://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png" />',
            name: 'Firefox',
            maker: '(Mozilla Foundation)',
            ticked: false
        },
        {
            icon: '<img  src="https://cdn1.iconfinder.com/data/icons/fatcow/32x32/safari_browser.png" />',
            name: 'Safari',
            maker: '(Apple)',
            ticked: false
        },
        {
            icon: '<img  src="https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/32/chrome.png" />',
            name: 'Chrome',
            maker: '(Google)',
            ticked: false
        },
        {
            msGroup: false
        },
        {
            name: '<strong>Classic Web Browsers</strong>',
            msGroup: true,
            disabled: true
        },
        {
            icon: '<img  src="http://www.ucdmc.ucdavis.edu/apps/error/nojavascript/images/netscape_icon.jpg" />',
            name: 'Netscape Navigator',
            maker: '(Netscape Corporation)',
            ticked: false
        },
        {
            icon: '<img  src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/Amaya_logo_65x50.png/48px-Amaya_logo_65x50.png" />',
            name: 'Amaya',
           ...