docs(VOtpInput): add missing images

vuetifyjs · Aug 2, 2023 · c02fda4 · c02fda4
1 parent 0a55521
commit c02fda4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
@@ -222,6 +222,12 @@ Form components are used to collect user input in a variety of ways.
 
 </components-list-item>
 
+<components-list-item name="OTP Input component" src="otp-input">
+
+  The OTP input component is used for MFA authentication via input field
+
+</components-list-item>
+
 <components-list-item name="Select component" src="selects">
 
   The select component is used to select a value from a list of options and is a replacement for the native select element
@@ -278,13 +284,13 @@ These components allow a user to select one or multiple items from a list of opt
 
 </components-list-item>
 
-<components-list-item name="Button group"  src="button-groups">
+<components-list-item name="Button group" src="button-groups">
 
   Button groups are used to select between multiple options using the button component
 
 </components-list-item>
 
-<components-list-item name="Chip group"  src="chip-groups">
+<components-list-item name="Chip group" src="chip-groups">
 
   Chip group is a wrapper component that makes chips interactive and allows them to be selected
 

diff --git a/packages/docs/src/pages/en/components/otp-input.md b/packages/docs/src/pages/en/components/otp-input.md
@@ -14,7 +14,7 @@ related:
 
 The OTP input is used for MFA procedure of authenticating users by a one-time password.
 
-<!-- ![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png){ height=300 } -->
+![Otp input Entry](https://cdn.vuetifyjs.com/docs/images/components/v-otp-input/v-otp-input-entry.png){ height=300 }
 
 ----
 
@@ -38,6 +38,17 @@ Here we display a list of settings that could be applied within an application.
 
 <api-inline hide-links />
 
+## Anatomy
+
+The `v-otp-input` component is a collection of [v-field](/api/v-field/) components that combine to create a single input.
+
+![Otp input Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-otp-input/v-otp-input-anatomy.png "OTP input Anatomy")
+
+| Element / Area | Description |
+| - | - |
+| 1. Container | The OTP input container holds a number of `v-field` components  |
+| 2. Field | The `v-field` component is used to create a single input field |
+
 ## Guide
 
 ### Props