In this tutorial, we will learn Jquery UI Controlgroup Example

A controlgroup is used to group various input widgets like checkbox, button, etc. The first features a horizontal toolbar-like orientation, the second is in a space-saving vertical orientation for usages like mobile devices and panels.



Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Controlgroup Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        .ui-controlgroup-vertical {
          width: 150px;
        }
        .ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
        .ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {
          text-align: center;
        }
        #car-type-button {
          width: 120px;
        }
        .ui-controlgroup-horizontal .ui-spinner-input {
          width: 20px;
        }
        .main-head{
            margin:100px auto;
            border:3px dotted #008B8B;
            padding:20px;
            width:60%;
        }
        .main-head h1{
            margin:0px 0px 15px 0px;
            color:#008B8B;
            text-align: center;
        }
        .ui-state-active{
            border:1px solid #008B8B;
            background:#008B8B;
        }
    </style>
</head>
<body style="background-color:#e1f489;">
<div class="main-head">
    <h1>Jquery UI Controlgroup Example - rathorji.in</h1>
    <fieldset>
    <legend>Rental Car</legend>
        <div class="controlgroup">
            <select id="car-type">
                <option>Compact car</option>
                <option>Midsize car</option>
                <option>Full size car</option>
                <option>SUV</option>
                <option>Luxury</option>
                <option>Truck</option>
                <option>Van</option>
            </select>
            <label for="transmission-standard">Standard</label>
            <input type="radio" name="transmission" id="transmission-standard">
            <label for="transmission-automatic">Automatic</label>
            <input type="radio" name="transmission" id="transmission-automatic">
            <label for="insurance">Insurance</label>
            <input type="checkbox" name="insurance" id="insurance">
            <label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
            <input id="horizontal-spinner" class="ui-spinner-input">
            <button>Book Now!</button>
        </div>
    </fieldset>
    <br>
    <fieldset>
        <legend>Rental Car</legend>
        <div class="controlgroup-vertical">
            <select>
                <option>Compact car</option>
                <option>Midsize car</option>
                <option>Full size car</option>
                <option>SUV</option>
                <option>Luxury</option>
                <option>Truck</option>
                <option>Van</option>
            </select>
            <label for="transmission-standard-v">Standard</label>
            <input type="radio" name="transmission-v" id="transmission-standard-v">
            <label for="transmission-automatic-v">Automatic</label>
            <input type="radio" name="transmission-v" id="transmission-automatic-v">
            <label for="insurance-v">Insurance</label>
            <input type="checkbox" name="insurance" id="insurance-v">
            <label for="vertical-spinner" class="ui-controlgroup-label"># of cars</label>
            <input id="vertical-spinner" class="ui-spinner-input">
            <button id="book">Book Now!</button>
        </div>
    </fieldset>
</div>

<script>
    $( function() {
        $( ".controlgroup" ).controlgroup()
        $( ".controlgroup-vertical" ).controlgroup({
          "direction": "vertical"
        });
    });
</script>
</body>
</html>


May this example help you.