ion-checkbox-example.tsx

import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonButton } from '@ionic/react';
import './Tab2.css';

const Tab2: React.FC = () => {
  const [ checked, setChecked ] = useState(false);
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton onClick={() => setChecked(true)}>check all</IonButton>
        <IonCheckbox checked={checked} onIonChange={e => setChecked(!e.detail.checked)} />
      </IonContent>
    </IonPage>
  );
};

export default Tab2;