Tutorial for Using data inputs

Using the inputter component

What you will be learning

  • how to use an input method to capture data.

We have a form set up, we need to start capturing information.

Let's check the docs and see what options we have at our disposal to capture an email. The input component is called ns-inputter, have a look at the documentation.

Let's start with an input that can capture text, and ideally, that can confirm what's typed is an email.

πŸ‘ Tip: Storybook can save you time!

Storybook is our component library. It holds all the components and their different variants. You can see how they behave, and respond to different viewports. You can also configure them and grab a code snippet resulting from your configuration. This piece of code can be used in your prototype (make sure you remove any attributes you do not need after you copy and paste it)

Find the version of <ns-inputter> that will help you capture an email address in Storybook. Once you have configured it, bring it into the editor inside the Forms, and using the documentation, get rid of any attributes you will not be using.

πŸ‘€ Hint

Try this piece of code:

<ns-panel>
  <h1>Let's create a form!</h1>
  <ns-form>
    <form>
      <ns-inputter validation="[&quot;isRequired&quot;]" value="" helper="" name="your-email">

      <label slot="label" for="email-input">Your email</label>
      <input type="email" id="email-input">
      </ns-inputter>
    </form>
  </ns-form>
</ns-panel>

We want the field to check that the value entered is an email. For that, we will need a validation attribute. Try and add that attribute (you can keep or replace the "isRequired" option)

In the editor, add/replace the validation option for the inputter.

πŸ‘€ Hint

Try this piece of code:

<ns-panel>
  <h1>Let's create a form!</h1>
  <ns-form>
    <form>
      <ns-inputter validation="[&quot;isRequired&quot;]" value="" helper="" name="your-email">

      <label slot="label" for="email-input">Your email</label>
      <input type="email" id="email-input">
      </ns-inputter>
    </form>
  </ns-form>
</ns-panel>

Note that for the validation options, we are using the HTML entity for the ampersand (&), this is to avoid closing the validation attribute when using them.

Now that we have a validation in place to check if the value matches an email address, we need a call to action in our form to trigger the validation.

Here’s a brief explanation of what β€œfor”, β€œid”, and β€œname” attributes are in HTML forms:

name="": This attribute specifies the name of an HTML form element. It is used to identify the form data after it has been submitted to the server.

id="": This attribute specifies a unique identifier for an HTML element. It is used to identify elements in the document so that they can be refered to.

for="" or: This attribute specifies which form element a label is bound to. It is used to associate a label with an input element. When you click on the label, it will focus on the input element that it is associated with. The for attribute on a label will be the same value as the id of the input it refers to.

We need a submit button

The call to action needs to have a type of submit for the form to know that the call to action is the trigger.

In the editor, add a call to action to the <ns-form> and see if the field gets validated.

πŸ‘€ Hint

Try this piece of code:

<ns-panel>
  <h1>Let's create a form!</h1>
  <ns-form>
    <ns-inputter validation="[&quot;isRequired&quot;]" value="" helper="" name="your-email">

    <label slot="label" for="email-input">Your email</label>
    <input type="email" id="email-input">
    </ns-inputter>
    <ns-cta type="submit">Submit form</ns-cta>
  </ns-form>
</ns-panel>