Text Input

Overview

Text inputs allow your users to enter letters, numbers and symbols on a single line.

Types

1) Default text input

Text Input Label

Text Input Label This is a example of hint text

<div class="field">
  <label class="label" for=input-1">Text Input Label</label>
  <div class="control">
    <input class="input" type="text" id=input-1" />
  </div>
</div>

<div class="field">
  <label class="label" for=input-2">Text Input Label</label>
  <span class="hint">This is a example of hint text</span>
  <div class="control">
    <input class="input" type="text" id=input-2" />
  </div>
</div>

2) Error Messaging

Use error messaging that is clear and concise. The error message should tell users what went wrong and/or how to rectify it.

The error message should be in between the text input label and the text input field. If you have hint text, it should be in between the error message and the text input field.

Email Address This is a example of hint text This email is invalid

<div class="field">
  <label class="label" for=input-3">Email Address</label>
  <span class="hint">This is a example of hint text</span>
  <span class="help is-danger">This email is invalid</span>
  <div class="control">
    <input
      class="input is-danger"
      type="email"
      placeholder="Email Address"
      value="hello_example.com"
      id=input-3"
    />
  </div>
  
</div>

3) Success Messaging

Success messaging should be used when you require inline validation. It can be used with or without the hint text. If hint text is used, it should clearly state what the user needs to enter into the field.

Email Address This is a example of hint text This email is valid

<div class="field">
  <label class="label" for=input-4">Email Address</label>
  <span class="hint">This is a example of hint text</span>
  <span class="help is-success">This email is valid</span>
  <div class="control">
      <input
      class="input is-success"
      type="email"
      placeholder="Email input"
      value="hello@example.com"
      id=input-4"
      />
  </div>
  
</div>

Usability Guidelines

Use the appropriate field length for the input

Length provides the users with an idea of how much text to input
E.g. a postal code text input should only be 6 numbers long

Avoid using placeholder text inside of the text field

This ensures that the hint text is available, and users can review their answers if need be. Clear labelling would also help users to understand better what to input.
We recommend that you avoid placeholder text as it disappears when users start typing.

If hint text is used, give examples to show users how you’ll like them to enter their answers or how you will be using their information

E.g. for emails, a useful hint text would be "We will only use your email for receipts." or specify the date format

When to use

Text inputs should be used:

When you need users to enter text that is only a single line.

The label of the text input should clearly indicate what the user needs to key in

Text inputs should not be used:

When you require users to enter text and/or long answers that span multiple lines.

Using the text area component would be more appropriate

When you require users to select from a predetermined list.

Using the <select>, checkbox or radio buttons components would be more appropriate.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component