Explore

Verification Code

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

3x Container

1x Image

4x Modern Text Input

2x Modern Button

2x Label

Procedure

Step 1 - create main container

Add a new Vertical Container PCF, call it "verify_frame" with this "Gap" property:

Step 2 - create content

Add a new Image object, call it "verify_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M53.9022 26.8465L50.5022 22.8965C49.8522 22.1465 49.3272 20.7465 49.3272 19.7465V15.4965C49.3272 12.8465 47.1522 10.6715 44.5022 10.6715H40.2522C39.2772 10.6715 37.8522 10.1465 37.1022 9.49648L33.1522 6.09648C31.4272 4.62148 28.6022 4.62148 26.8522 6.09648L22.9271 9.52148C22.1771 10.1465 20.7521 10.6715 19.7771 10.6715H15.4521C12.8021 10.6715 10.6271 12.8465 10.6271 15.4965V19.7715C10.6271 20.7465 10.1021 22.1465 9.47715 22.8965L6.10215 26.8715C4.65215 28.5965 4.65215 31.3965 6.10215 33.1215L9.47715 37.0965C10.1021 37.8465 10.6271 39.2465 10.6271 40.2215V44.4965C10.6271 47.1465 12.8021 49.3215 15.4521 49.3215H19.7771C20.7521 49.3215 22.1771 49.8465 22.9271 50.4965L26.8772 53.8965C28.6022 55.3715 31.4272 55.3715 33.1772 53.8965L37.1272 50.4965C37.8772 49.8465 39.2772 49.3215 40.2772 49.3215H44.5272C47.1772 49.3215 49.3523 47.1465 49.3523 44.4965V40.2465C49.3523 39.2715 49.8772 37.8465 50.5272 37.0965L53.9272 33.1465C55.3772 31.4215 55.3772 28.5715 53.9022 26.8465ZM40.4022 25.2715L28.3272 37.3465C27.9772 37.6965 27.5022 37.8965 27.0022 37.8965C26.5022 37.8965 26.0272 37.6965 25.6772 37.3465L19.6271 31.2965C18.9021 30.5715 18.9021 29.3715 19.6271 28.6465C20.3521 27.9215 21.5521 27.9215 22.2771 28.6465L27.0022 33.3715L37.7522 22.6215C38.4772 21.8965 39.6772 21.8965 40.4022 22.6215C41.1272 23.3465 41.1272 24.5465 40.4022 25.2715Z' fill='#6087CC'/> </svg>")

And Label object under "verify_frame", call it "verify_title" with Text property:

"Enter Verification Code"

And Label object under "verify_frame", call it "verify_dscr" with Text property:

"Enter the 4-digit code we sent to email. Didn't receive a code? Try again."

Step 3 - create codes container

Add a new Horizontal Container PCF, call it "verify_codes_frame" with this "Gap" property:

Add 4 new Text Input PCFs, call it "number_1/2/3/4" with this "BorderColor" property:

RGBA(96, 135, 204, 1)

Step 4 - create buttons container

Add a new Horizontal Container PCF, call it "verify_buttons" with this "Gap" property:

Add 2 new Button PCFs, call it "cancel/confirm_button" with this "Font" property:

"Clash Display"

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_verify_frame = Vertical Container

horcont_verify_codes_frame, horcont_verify_buttons = Horizontal Container

svg_verify_icon = Image

lbl_verify_title, lbl_verify_dscr = Label

txtpcf_number_1 = Text Input

btnpcf_cancel_button, btnpcf_confirm_button = Button

YAML Output

⁠

Used Colours

Background - #FFFFFF

Font Colour - #314AA3

Icon Colour - #6087CC

Dscr Colour - #5E5B7B

⁠

← Font Slider⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.