Show ButtonGroup selected state on initial render in JavaScript ButtonGroup control

06 Jun 2023 / 1 minute to read

To show selected state on initial render, checked property should to added to the corresponding input element.

The following example illustrates how to show selected state on initial render.

Source

Preview

index.html

styles.css

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Button-Group</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='e-btn-group'>
            <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
            <label class="e-btn" for="checkbold">Bold</label>
            <input type="checkbox" id="checkitalic" name="font" value="italic" />
            <label class="e-btn" for="checkitalic">Italic</label>
            <input type="checkbox" id="checkline" name="font" value="underline"/>
            <label class="e-btn" for="checkline">Underline</label>
        </div>
    </div>
</body>

</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}