Text Input

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

General

Example

With hint text and icon

This is the hint text
This is the hint text
This is the hint text
Error message
This is the hint text

 
<div class="cgds form-group mb-2">
  <label for="defaultWith" class="form-label">Default</label>
  <div id="defaultWithHelp" class="form-text">This is the hint text</div>
  <div class="cgds form-control-group">
    <input type="text" class=" form-control" id="defaultWith" aria-describedby="defaultWith" placeholder="Text goes here">
    <i class="bi bi-search form-control-icon"></i>
  </div>
</div>
<div class="cgds form-group mb-2">
  <label for="hoverWith" class="form-label">Hover</label>
  <div id="hoverWithHelp" class="form-text">This is the hint text</div>
  <div class="cgds form-control-group">
    <input type="text" class="form-control" id="hoverWith" aria-describedby="hoverWithHelp" placeholder="Text goes here" autofocus />
    <i class="bi bi-search form-control-icon"></i>
  </div>
</div>
<div class="cgds form-group mb-2 was-validated">
  <label for="errorWith" class="form-label">Error</label>
  <div id="errorWithHelp" class="form-text">This is the hint text</div>
  <div class="cgds form-control-group">
    <input type="text" class="form-control" id="errorWith" aria-describedby="errorWithHelp errorWithInvalid" placeholder="Text goes here" required />
    <i class="bi bi-search form-control-icon"></i>
    <div id="errorWithInvalid" class="invalid-feedback">Error message</div>
  </div>
</div>
<div class="cgds form-group has-feedback mb-2">
  <label for="disabledWith" class="form-label">Disabled</label>
  <div id="disabledWithHelp" class="form-text">This is the hint text</div>
  <div class="cgds form-control-group">
    <input type="text" class="form-control" id="disabledWith" aria-describedby="disabledWithHelp" placeholder="Text goes here" disabled />
    <i class="bi bi-search form-control-icon"></i>
  </div>
</div>

Without hint text and icon

Error message

 
<div class="form-group mb-2">
  <label for="defaultWithout" class="form-label">Default</label>
  <input type="text" class="form-control" id="defaultWithout" placeholder="Text goes here" />
</div>
<div class="form-group mb-2">
  <label for="hoverWithout" class="form-label">Hover</label>
  <input type="text" class="form-control" id="hoverWithout" placeholder="Text goes here" autofocus />
</div>
<div class="form-group mb-2 was-validated">
  <label for="errorWithout" class="form-label">Error</label>
  <input type="text" class="form-control" id="errorWithout" aria-describedby="errorWithoutInvalid" placeholder="Text goes here" required />
  <div id="errorWithoutInvalid" class="invalid-feedback">Error message</div>
</div>
<div class="form-group mb-2">
  <label for="disabledWithout" class="form-label">Disabled</label>
  <input type="text" class="form-control" id="disabledWithout" placeholder="Text goes here" disabled />
</div>

Anatomy

Text Input Anatomy
  1. Text label: Inform users of what data should be put into the field, labels must always be outside the text field.
  2. Hint text: Serve as a guide to the user, helping to inform users as to what kind of data they are required to enter.
  3. Icon (situational): Helps to make the input more specific or convey the functionality of the text input. E.g. Search, dropdown, type of currency.
  4. Error message: Serves to convey information on the error and allows the user to make the necessary correction.
  5. Spacing: Spacing between label, hint text and error/warning messaging will inherit the line height of the text used.

Spacing

Text Input Spacing

Within the text input
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing on the left and right.

Usage guidelines

Text input should be used when:

  • When you need users to enter text, that is only a single line.
  • When you need freeform answers.
  • When you need input simplicity. E.g., Entering a date is easier than selecting from a date picker or calendar.

Text input should not be used when:

  1. When you require users to enter text and/or long answers that span multiple lines.
    1. Using the Text Area component would be more appropriate.
  2. When you require users to select from a predetermined list.
    1. Using the <select>, checkbox or radio button components would be more appropriate.

Usability guidelines

Ensure that the labels are short and concise
This will allow users to understand what needs to be entered quickly.

Labels are outside the text field
Labels should be above or next to the text field. This makes it clear that the user is able to input an answer.

Text fields of the appropriate length
The length of the text input should correspond to the length of the expected answer. This will give the user an idea of how much they need to fill in.

Use hint text
Make use of hint text to guide the user as to the format required. This removes uncertainty and will help reduce mistakes when filling in the text input.

Avoid placeholder text
Placeholder text disappears when a text input is filled in. If the placeholder text is not visible, users will no longer have the text when they need to review their entries. Use hint text instead of a placeholder text.

Text Input design tokens

$form-text-margin-top: null !default;
$form-text-font-size: $font-size-base !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: $text-muted !default;
$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: $font-weight-bold !default;
$form-label-color: null !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: null !default;
$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
$input-border-radius: $border-radius !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-400 !default;
$input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out,
box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{$form-feedback-icon-valid-color}' viewBox='0 0 16 16'><path d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{$form-feedback-icon-invalid-color}' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/></svg>") !default;
$form-validation-states: ("valid": ("color": $form-feedback-valid-color, "icon": $form-feedback-icon-valid), "invalid": ("color": $form-feedback-invalid-color, "icon": $form-feedback-icon-invalid)) !default;
Home
Previous version 1.0.3