docs(checkbox): update reference name

Author: thetaPC

static/usage/v8/checkbox/helper-error/demo.html

@@ -31,27 +31,27 @@
 
     <script>
       const form = document.getElementById('my-form');
-      const checkbox = form.querySelector('ion-checkbox');
+      const agree = form.querySelector('ion-checkbox');
 
       form.addEventListener('submit', (event) => submit(event));
-      checkbox.addEventListener('ionChange', (event) => validateCheckbox(event));
+      agree.addEventListener('ionChange', (event) => validateCheckbox(event));
 
       const validateCheckbox = (event) => {
-        checkbox.classList.add('ion-touched');
+        agree.classList.add('ion-touched');
 
         if (!event.detail.checked) {
-          checkbox.classList.add('ion-invalid');
-          checkbox.classList.remove('ion-valid');
+          agree.classList.add('ion-invalid');
+          agree.classList.remove('ion-valid');
         } else {
-          checkbox.classList.remove('ion-invalid');
-          checkbox.classList.add('ion-valid');
+          agree.classList.remove('ion-invalid');
+          agree.classList.add('ion-valid');
         }
       };
 
       const submit = (event) => {
         event.preventDefault();
 
-        validateCheckbox({ detail: { checked: checkbox.checked } });
+        validateCheckbox({ detail: { checked: agree.checked } });
       };
     </script>
   </body>

static/usage/v8/checkbox/helper-error/javascript.md

@@ -11,27 +11,27 @@
 
 <script>
   const form = document.getElementById('my-form');
-  const checkbox = form.querySelector('ion-checkbox');
+  const agree = form.querySelector('ion-checkbox');
 
   form.addEventListener('submit', (event) => submit(event));
-  checkbox.addEventListener('ionChange', (event) => validateCheckbox(event));
+  agree.addEventListener('ionChange', (event) => validateCheckbox(event));
 
   const validateCheckbox = (event) => {
-    checkbox.classList.add('ion-touched');
+    agree.classList.add('ion-touched');
 
     if (!event.detail.checked) {
-      checkbox.classList.add('ion-invalid');
-      checkbox.classList.remove('ion-valid');
+      agree.classList.add('ion-invalid');
+      agree.classList.remove('ion-valid');
     } else {
-      checkbox.classList.remove('ion-invalid');
-      checkbox.classList.add('ion-valid');
+      agree.classList.remove('ion-invalid');
+      agree.classList.add('ion-valid');
     }
   };
 
   const submit = (event) => {
     event.preventDefault();
 
-    validateCheckbox({ detail: { checked: checkbox.checked } });
+    validateCheckbox({ detail: { checked: agree.checked } });
   };
 </script>
 ```

static/usage/v8/checkbox/helper-error/react.md

@@ -6,7 +6,7 @@ function Example() {
   const [isTouched, setIsTouched] = useState<boolean>(false);
   const [isValid, setIsValid] = useState<boolean | undefined>();
 
-  const checkboxRef = useRef<HTMLIonCheckboxElement>(null);
+  const agreeRef = useRef<HTMLIonCheckboxElement>(null);
 
   const validateCheckbox = (event: CheckboxCustomEvent<{ checked: boolean }>) => {
     setIsTouched(true);
@@ -16,8 +16,8 @@ function Example() {
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (checkboxRef.current) {
-      validateCheckbox({ detail: { checked: checkboxRef.current.checked } } as CheckboxCustomEvent<{
+    if (agreeRef.current) {
+      validateCheckbox({ detail: { checked: agreeRef.current.checked } } as CheckboxCustomEvent<{
         checked: boolean;
       }>);
     }
@@ -27,7 +27,7 @@ function Example() {
     <>
       <form onSubmit={submit}>
         <IonCheckbox
-          ref={checkboxRef}
+          ref={agreeRef}
           className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
             isTouched ? 'ion-touched' : ''
           }`}

static/usage/v8/checkbox/helper-error/vue.md

@@ -2,7 +2,7 @@
 <template>
   <form id="my-form" @submit.prevent="submit">
     <ion-checkbox
-      v-model="isChecked"
+      v-model="agree"
       helper-text="This needs to be checked"
       error-text="This field is required"
       @ionChange="validateCheckbox"
@@ -27,7 +27,7 @@
       IonButton,
     },
     setup() {
-      const isChecked = ref(false);
+      const agree = ref(false);
       const isTouched = ref(false);
       const isValid = ref<boolean | undefined>();
 
@@ -37,12 +37,11 @@
       };
 
       const submit = () => {
-        isTouched.value = true;
-        isValid.value = isChecked.value;
+        validateCheckbox({ detail: { checked: agree.value } } as CheckboxCustomEvent<{ checked: boolean }>);
       };
 
       return {
-        isChecked,
+        agree,
         isTouched,
         isValid,
         validateCheckbox,