Text field

Guidance

Text field inputs are used for collecting short, single-line free-form text. Use a text field when you need users to enter a single line of text such as their name, email address or password.

Be sure to set the type attribute on your inputs. Most of the time it will be type="text", but you should use type="email" when collecting email addresses, and type="tel" when collecting telephone numbers.

Text field

<!-- Text input -->
<label for="text-field">Field label</label>
<input type="text" name="text-field" id="text-field" />

Other text input types

<!-- Text input -->
<label for="name">Name</label>
<input type="text" name="name" id="name" class="gnb-field-lg" />

<!-- Email text input -->
<label for="email">Email</label>
<input type="email" name="email" id="email" class="gnb-field-lg" />

<!-- Phone text input -->
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" class="gnb-field-lg" />