Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React App styled with Tailwind and sign up form built using Formik

@KristianDunne

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using Formik and wow I am impressed at how easy it all was!

I could improve the readability and maintainability of the form by creating my own custom input field components.

I also need an elegant for the icons in the input fields upon a validation error. Suggestions would be appreciated!

Community feedback

Boyan Liu 465

@BoyanLiuu

Posted

I can suggest one

It is use position absolute for the icon you can have a div include both input and error icon div for the error icon div, you can set background image for the error icon. Then you use position absolute for the icon dive and position relative for the outter div that wrapper both input and error icon div. Then you use top bottom to put the error icon div in the proper position.

                        <div class="input-container">
                            <input
                                aria-label="first name"
                                type="text"
                                name="first-name"
                                id="first-name"
                                placeholder="First Name"
                            />
                            <div class="error-icon first-icon"></div>
                            <div class="error-message">
                                First Name cannot be empty
                            </div>
                        </div>
1

@KristianDunne

Posted

@BoyanLiuu Thanks so much for taking the time to suggest this! I am going to give this a try :)

0

@KristianDunne

Posted

@BoyanLiuu I have just used your suggestion and it worked great. Thank you very much 👍

0
Boyan Liu 465

@BoyanLiuu

Posted

@KristianDunne glad to help :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord