How to create Numeric or Password or Text OTP Input in Ionic 7
By the end of this you would have grasped how to create OTP input using Ionic 7. We will create three different types of OTPs. One for numbers, another for password and another for normal text. Our OTP can be of variable lengths, being 4, 5 or 6 characters as depicted in Figure 1 below.
We will look at the HTML to create this OTP input. To create our OTP, we use a ion-grid, ion-row, ion-col and some ion-inputs. The minimum and maximum length of each input has been set to be 1, to only allow 1 character. The size of each column has been set to 2.
- The Numeric OTP
The fist OTP is composed of 1 ion-grid, 1 ion-row, 4 ion-col and 4 ion-input components. The size of each ion-col has been set to 2. The type attribute for each of the ion-input inside the ion-col has been set to “tel”, this will allow for a numeric keypad to be shown on mobile devices. The HTML design of this OTP is depicted below.
<ion-grid id="myotp" mode="ios" class="ion-text-center">
<ion-row id="myotpgridrow" mode="ios">
<ion-col id="myotpgridrowcol1" mode="ios" size="2">
<ion-input id="myotpotp1" fill="outline" maxlength="1" minlength="1" mode="md" type="tel" class="myotpotp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="myotpgridrowcol2" mode="ios" size="2">
<ion-input id="myotpotp2" fill="outline" maxlength="1" minlength="1" mode="md" type="tel" class="myotpotp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="myotpgridrowcol3" mode="ios" size="2">
<ion-input id="myotpotp3" fill="outline" maxlength="1" minlength="1" mode="md" type="tel" class="myotpotp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="myotpgridrowcol4" mode="ios" size="2">
<ion-input id="myotpotp4" fill="outline" maxlength="1" minlength="1" mode="md" type="tel" class="myotpotp" style="--border-radius:10px">
</ion-input>
</ion-col>
</ion-row>
</ion-grid>By setting our ion-input mode to “md” and the fill to “outline” we are able to have a border around the ion-inputs. We have however adjusted the border radius style of the ion-inputs to make it more rounder.
2. The Password OTP
Our password OTP hides the text entered because each of the ion-input “type” attributes has been set to input. In the example above we created 4 inputs, this example has 1 additional input, making our OTP length to be 5 characters.
Let’s look at the HTML structure of the password OTP as depicted in Figure 2.
<ion-grid id="input1" mode="ios" class="ion-text-center">
<ion-row id="input1gridrow" mode="ios">
<ion-col id="input1gridrowcol1" mode="ios" size="2">
<ion-input id="input1otp1" fill="outline" maxlength="1" minlength="1" mode="md" type="password" class="input1otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input1gridrowcol2" mode="ios" size="2">
<ion-input id="input1otp2" fill="outline" maxlength="1" minlength="1" mode="md" type="password" class="input1otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input1gridrowcol3" mode="ios" size="2">
<ion-input id="input1otp3" fill="outline" maxlength="1" minlength="1" mode="md" type="password" class="input1otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input1gridrowcol4" mode="ios" size="2">
<ion-input id="input1otp4" fill="outline" maxlength="1" minlength="1" mode="md" type="password" class="input1otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input1gridrowcol5" mode="ios" size="2">
<ion-input id="input1otp5" fill="outline" maxlength="1" minlength="1" mode="md" type="password" class="input1otp" style="--border-radius:10px">
</ion-input>
</ion-col>
</ion-row>
</ion-grid>You will note that this HTML code is not very different from the one above. In this instance we have an additional ion-col with an ion-input component. The type attribute for each of the ion-inputs has been set to password, completing our mission.
3. The Text OTP
You guessed it right, the text OTP, means that each of the ion-input components will receive an attribute value of “text” for the “type” attribute. Let’s take a look in the HTML below.
<ion-grid id="input2" mode="ios" class="ion-text-center">
<ion-row id="input2gridrow" mode="ios">
<ion-col id="input2gridrowcol1" mode="ios" size="2">
<ion-input id="input2otp1" fill="outline" maxlength="1" minlength="1" mode="md" type="text" class="input2otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input2gridrowcol2" mode="ios" size="2">
<ion-input id="input2otp2" fill="outline" maxlength="1" minlength="1" mode="md" type="text" class="input2otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input2gridrowcol3" mode="ios" size="2">
<ion-input id="input2otp3" fill="outline" maxlength="1" minlength="1" mode="md" type="text" class="input2otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input2gridrowcol4" mode="ios" size="2">
<ion-input id="input2otp4" fill="outline" maxlength="1" minlength="1" mode="md" type="text" class="input2otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input2gridrowcol5" mode="ios" size="2">
<ion-input id="input2otp5" fill="outline" maxlength="1" minlength="1" mode="md" type="text" class="input2otp" style="--border-radius:10px">
</ion-input>
</ion-col>
<ion-col id="input2gridrowcol6" mode="ios" size="2">
<ion-input id="input2otp6" fill="outline" maxlength="1" minlength="1" mode="md" type="text" class="input2otp" style="--border-radius:10px">
</ion-input>
</ion-col>
</ion-row>
</ion-grid>In this example, we have created 6 rows and 6 input components. Each input component type attribute has been set to text, so that it can allow text.
Congratulations, we have just successfully created our 3 types of OTP inputs, one to take numbers, one to take a password and another one to take any text. All of these accept 1 character per input component.
Happy coding.
Check me out on Github and on my YT Channel for more content.
Check out my other thread about Ionic7 Wireframes
Stackademic
Thank you for reading until the end. Before you go:
