docs: checkbox and switch (#1496)

* docs: fix checked for api of checkbox and switch * docs: fix avatar key in vue-sfc
chakra-ui · May 16, 2024 · c44b0e9 · c44b0e9
1 parent 9c2fca5
commit c44b0e9
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 8 deletions.
diff --git a/website/data/snippets/react/checkbox/usage.mdx b/website/data/snippets/react/checkbox/usage.mdx
@@ -10,7 +10,7 @@ function Checkbox() {
   return (
     <label {...api.rootProps}>
       <span {...api.labelProps}>
-        Input is {api.isChecked ? "checked" : "unchecked"}
+        Input is {api.checked ? "checked" : "unchecked"}
       </span>
       <div {...api.controlProps} />
       <input {...api.hiddenInputProps} />

diff --git a/website/data/snippets/react/switch/usage.mdx b/website/data/snippets/react/switch/usage.mdx
@@ -13,7 +13,7 @@ function Checkbox() {
       <span {...api.controlProps}>
         <span {...api.thumbProps} />
       </span>
-      <span {...api.labelProps}>{api.isChecked ? "On" : "Off"}</span>
+      <span {...api.labelProps}>{api.checked ? "On" : "Off"}</span>
     </label>
   )
 }

diff --git a/website/data/snippets/solid/switch/usage.mdx b/website/data/snippets/solid/switch/usage.mdx
@@ -14,7 +14,7 @@ function Checkbox() {
       <span {...api().controlProps}>
         <span {...api().thumbProps} />
       </span>
-      <span {...api().labelProps}>{api.isChecked ? "On" : "Off"}</span>
+      <span {...api().labelProps}>{api.checked ? "On" : "Off"}</span>
     </label>
   )
 }

diff --git a/website/data/snippets/vue-jsx/checkbox/usage.mdx b/website/data/snippets/vue-jsx/checkbox/usage.mdx
@@ -17,7 +17,7 @@ export default defineComponent({
       return (
         <label {...api.rootProps}>
           <span {...api.labelProps}>
-            Input is {api.isChecked ? "checked" : "unchecked"}
+            Input is {api.checked ? "checked" : "unchecked"}
           </span>
           <div {...api.controlProps} />
           <input {...api.hiddenInputProps} />

diff --git a/website/data/snippets/vue-jsx/switch/usage.mdx b/website/data/snippets/vue-jsx/switch/usage.mdx
@@ -20,7 +20,7 @@ export default defineComponent({
           <span {...api.controlProps}>
             <span {...api.thumbProps} />
           </span>
-          <span {...api.labelProps}>{api.isChecked ? "On" : "Off"}</span>
+          <span {...api.labelProps}>{api.checked ? "On" : "Off"}</span>
         </label>
       )
     }

diff --git a/website/data/snippets/vue-sfc/avatar/usage.mdx b/website/data/snippets/vue-sfc/avatar/usage.mdx
@@ -12,7 +12,7 @@
 <template>
   <div v-bind="api.rootProps">
     <span v-bind="api.fallbackProps">PA</span>
-    <img alt="PA" src="{src}" v-bind="api.imageProps" />
+    <img alt="PA" :src="src" v-bind="api.imageProps" />
   </div>
 </template>
 ```
diff --git a/website/data/snippets/vue-sfc/checkbox/usage.mdx b/website/data/snippets/vue-sfc/checkbox/usage.mdx
@@ -15,7 +15,7 @@
   <label v-bind="api.rootProps">
     <span v-bind="api.labelProps">
       Input is
-      <span v-if="api.isChecked"> checked</span>
+      <span v-if="api.checked"> checked</span>
       <span v-else> unchecked</span>
     </span>
     <div v-bind="api.controlProps" />

diff --git a/website/data/snippets/vue-sfc/switch/usage.mdx b/website/data/snippets/vue-sfc/switch/usage.mdx
@@ -18,7 +18,7 @@
       <span v-bind="api.thumbProps" />
     </span>
     <span v-bind="api.labelProps">
-      <span v-if="api.isChecked">On</span>
+      <span v-if="api.checked">On</span>
       <span v-else>Off</span>
     </span>
   </label>