Checkbox

link - developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
This control allows the user to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).

import * as React from 'react';    
import { Checkbox,  ICheckboxStyles} from '@fluentui/react';  

interface IProps_CheckboxExample { 
} 
interface IState_CheckboxExample { 
  isChecked: boolean; 
} 

export class CheckboxBasicExample extends React.Component<IProps_CheckboxExample , 

IState_CheckboxExample> { 
  constructor(props: IProps_CheckboxExample) { 
    super(props); 

    this.state = { 
      isChecked: false 
    }; 

    this._onCheckboxChange = this._onCheckboxChange.bind(this); 
  } 

  render() { 
    let { isChecked } = this.state; 

    let styles: ICheckboxStyles = { 
      root: { 
        marginTop: '10px',  
        backgroundColor: '#8CC152',  
        paddingTop: '10px',  
        paddingBottom: '10px',  
        paddingLeft: '10px'  
      }, 
      checkmark: { 
      } 
    }; 

    return ( 
      <div> 
        <Checkbox 
          label='CheckBox 1' 
          onChange={ this._onCheckboxChange } 
          inputProps={ { 
            onFocus: () => { console.log('Uncontrolled checkbox is focused'); }, 
            onBlur: () => { console.log('Uncontrolled checkbox is blured'); } 
          } } 
          styles={ styles } 
        /> 

        <Checkbox 
          label='CheckBox 2' 
          onChange={ this._onCheckboxChange } 
          boxSide={'end'}  
          inputProps={ { 
            onFocus: () => { console.log('Uncontrolled checkbox is focused'); }, 
            onBlur: () => { console.log('Uncontrolled checkbox is blured'); } 
          } } 
          styles={ styles } 
        /> 
      </div> 
    ); 
  } 

  _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) { 
    console.log("The option has been changed to ${isChecked}."); 
  } 
}