Set ButtonGroup initial selection

2 Mar 20263 minutes to read

Display a button in the selected state when the ButtonGroup first renders by adding the checked attribute to the corresponding input element. This is useful for setting default selections in radio and checkbox button groups.

The following example demonstrates how to set a selected state on initial render:

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render checkbox type ButtonGroup.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render checkbox type ButtonGroup.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));