Submit Pin Input Values in a Form with a Hidden Input
In some cases you'll want to actually have your pin input in a form to handle submitting the values. What's awesome about our implementation is that it doesn't get in the way of adding functionality like this.
First we'll extend our state machine to focus the first input when we click on the input label. Then we'll wrap our Pin Input component in a form element and implement an onSubmit. We can submit values of the form by creating a hidden input and set it's values to the joined values of the other inputs.
Segun Adebayo: [0:01] The pin input components we've created so far works pretty great. Let's see how we can improve its usage within forms.
[0:09] Before we get into that, it would be great if clicking on Enter verification -- this is currently the label of the component -- would at least focus on the first input since clicking on a label by default triggers some sort of focus on the control element.
[0:26] Let's see how we can implement this feature. I'll take a look at the code here. What you can see here is we have the label Enter verification and that is no way connected to the components or the pin inputs here.
[0:43] The first thing we're going to do is to attach an onClick to this and say when the label is clicked, we're going to send an event to the machine called LABEL_CLICK. Within the machine, we're going to trigger the focus, so it actually moves the focus to the first pin input field.
[1:03] Let's open up the machine code. So far, we see here that by default, the component is typically in the idle state as stated here with the initial value. In here, we're going to add a LABEL_CLICK transition. It says that when the label is clicked, we want to execute the action. What we want to do here is to focus the first input.
[1:30] Now let's try the implementation for this action. Within here, we've got focusPrevious, focusNext. I'm just going to add focusFirst up here. Here, because of the way we set up the machine so far, focusing the first input is just as simple as setting the focusIndex to .
[1:49] Again, what happens when we set the focusIndex to ? We've set up a watch effect here that basically tracks the focusIndex and executes the actual on focus. If we switch back to the demo, reload the page and click this label here, you see here that the first input is automatically focused. That's awesome.
[2:14] Next, we're going to wrap this container element within a form. Let's create a form element here. Then we'll add an onSubmit handler here, which is how we're going to test that it works within forms. Within this, we're just going to preventDefault and create a form data out of that form element by calling the new FormData(event.currentTarget).
[2:41] Now we can create a quick log of the formData.get, and this actually points to the name of the form field. Let's create a hypothetical name here called pincode. That is the name of this field we are trying to capture here.
[3:00] Because the pin input has four different parts, we're going to create another input element that is hidden by default. We create an input with type="hidden". On this element, we're going to add a name of pincode.
[3:14] We're adding the name here so it matches the formData here. That is how the value there propagates up to the form. Then we're going to set a value for this hidden input that matches the value and because the value is a string array, we're just going to join that like so.
[3:36] Now we are able to pass the form value, the values for each field into the form, via the formData. This is how we get it to work within forms.
[3:46] To test this out, we're going to add a button to the end of that form. We'll add a button here with a type of submit. Then we'll just put Submit.
[3:58] To improve the CSS a little bit, we're going to head over to the styles. Then somewhere in here we can just add a form, set it to display: flex, flex-direction: column. Then we set a gap of 10px.
[4:15] With that in place, let's take a look at how this works and what it looks like now. Here we have the label and the button set up. If I click the label now, Enter verification, it focuses the pin input, which is great.
[4:35] Let's type 1234 and then the onComplete gets code, which is awesome. Then lastly, let's click the Submit button. There you go. You see that we actually get the logs of 1234 and that is how we connect the values to forms.