React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Show ButtonGroup selected state on initial render in React ButtonGroup component

23 Feb 2021 / 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
app.tsx
index.html
app.jsx
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render checkbox type ButtonGroup.
class App extends React.Component<{}, {}> {
  public render() {
    return (
      <div>
        <div className='e-btn-group'>
            <input type="checkbox" id="checkbold" name="font" value="bold" checked={true}/>
            <label className="e-btn" htmlFor="checkbold">Bold</label>
            <input type="checkbox" id="checkitalic" name="font" value="italic" />
            <label className="e-btn" htmlFor="checkitalic">Italic</label>
            <input type="checkbox" id="checkline" name="font" value="underline"/>
            <label className="e-btn" htmlFor="checkline">Underline</label>
        </div>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.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='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render checkbox type ButtonGroup.
class App extends React.Component {
    render() {
        return (<div>
        <div className='e-btn-group'>
            <input type="checkbox" id="checkbold" name="font" value="bold" checked={true}/>
            <label className="e-btn" htmlFor="checkbold">Bold</label>
            <input type="checkbox" id="checkitalic" name="font" value="italic"/>
            <label className="e-btn" htmlFor="checkitalic">Italic</label>
            <input type="checkbox" id="checkline" name="font" value="underline"/>
            <label className="e-btn" htmlFor="checkline">Underline</label>
        </div>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
Previous
Next