TextInput Component Overview

[00:00 - 00:10] Congratulations, you've made it to the interactive section of the course. The remaining lessons will include practical examples of applying the accessibility concepts by building out components.

[00:11 - 00:20] In this module, we'll implement a text input component. Although seemingly basic, this component will reinforce some of the important concepts that were covered in the first half of the course.

[00:21 - 00:28] In this lesson, we'll be using React to build out our components. However, if you have experience with another front-end framework, that should be sufficient.

[00:29 - 00:42] If you'd like to learn more about React, feel free to check out the official documentation. Some of the concepts we'll be covering throughout this module are label and input association, RE attributes, styling for various input states, and color contrast.

[00:43 - 00:54] We'll be tying in a lot of the concepts from earlier, like I mentioned. A text input is commonly found in component libraries, as these types of inputs are essential for gathering user data.

[00:55 - 01:02] The component we will be building will encompass two different states. The first state is what I'm calling the standard view, which is initially presented to the user when they're entering data.

[01:03 - 01:16] The second state is what I'm dubbing as an error view, which is displayed if invalid input is entered at any time. The starter code for the project can be found in the code sandbox link provided in the lesson manuscript.

[01:17 - 01:28] Feel free to fork the sandbox and follow along with the corresponding lessons if you want. Now we'll go through the different files that we'll be using throughout this implementation process and we'll start out by looking at app.jsx.

[01:29 - 01:43] So this file serves as the entry point for the project and will be the location where we render the text input component and pass in the props that the component accepts. The second file is text input.jsx and this is where we'll be spending a majority of our time.

[01:44 - 01:56] This file provides a boilerplate for the main text input component. The props with the star emoji next to them indicate the props that need to be wired up to make the code accessible while all the other props have been wired up properly.

[01:57 - 02:17] Third file is text input.css and to get us started there are styles already being applied to the input and label elements to make it more visually appealing than the stock styles that get included with those elements. And just a caveat that in a real world application you wouldn't typically target elements directly as we're doing in this style sheet.

[02:18 - 02:34] Inside you employ a more powerful and organized CSS solutions like CSS modules, style components, tail and CSS, whatever you choose to do. However, to keep things really simple and straightforward we'll be using plain old CSS and making most of the CSS selectors.

[02:35 - 02:38] And then as far as dependencies go there really aren't that many. There's only two.

[02:39 - 02:51] First is the prop type package just for some basic runtime type checking. And then additionally we're using one of the SVGs from the Radix icons package and it's upcoming lesson about handling error messages.

[02:52 - 02:54] And that's a quick lay of the land of what we're going to be building. So let's dive in.