Style a Pin Input through Data Attributes in React

Segun Adebayo
InstructorSegun Adebayo
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

Now that we have a project, we need a Pin input to work with. We'll create 4 inputs and style them so they look like a security code pin input that you would expect to see.

Instructor: [0:00] Now that we have the Vite project setup, let's run pnpm dev to start dev server.

[0:08] Here, we have the Vite and React dev server running. Because we're designing the pin input, let's clean up this template and pair it with the pin input element.

[0:18] The first thing I'm going to do is to remove most of these templates here and create a first container here. Let's give it a data part attribute of container.

[0:29] Next, I'm going to create a label here to give this entire input a label. Let's call this enter verification.

[0:40] Next, we create a div in there with a couple of inputs, so maybe four different input types in there. Then we can give these a data part attribute of input group.

[0:57] Next, all imports would have a data attribute of input. We go here, we drop this here, we drop this here, and finally, right there. Now we have the basic structure of our components. I just cleaned up all of this use state, and most of the fusible templates.

[1:17] Now, head over to CSS to style this component pretty fast. Again, I'm going to delete all of this boilerplate code, and I'll start by styling the container part with the display flex. Flex direction column and a gap. Next, I will style the input group part. Call it the input group right there and we give that as well a display flex and a gap of 1 ram. That way, we have all our inputs spread out horizontally.

[2:01] Hey, it's currently overflowing the screen at the moment. Let's style our inputs. Our style today is about inputs. Give it a width of four rams and give it a height of six ram. Next I'll make sure it's center aligned by putting text align center and increasing the font size, as well, to something like two rams.

[2:26] Now, we'll set up the basic boilerplate of our paint input. You can see it looks pretty good.

egghead
egghead
~ 15 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today