🚀 We value your input in shaping our future plans. Take charge and have a direct impact by participating in our survey.

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

HTML React Web Component 
<div class="mb-2">
    <label for="defaultWith" class="form-label">Default</label>
    <div id="defaultWithHelp" class="form-text">This is the hint text</div>
    <div class="sgds 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="mb-2">
    <label for="hoverWith" class="form-label">Hover</label>
    <div id="hoverWithHelp" class="form-text">This is the hint text</div>
    <div class="sgds 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="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="sgds 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="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="sgds 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>
 View on React storybook View on Web component storybook

Without hint text and icon

Error message

HTML React Web Component 
<div class="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="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="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="mb-2">
    <label for="disabledWithout" class="form-label">Disabled</label>
    <input type="text" class="form-control" id="disabledWithout" placeholder="Text goes here" disabled />
</div>
 View on React storybook View on Web component storybook

Anatomy

Text Input Anatomy
  1. Text label: Inform users of what data should be put into the field, labels must always be outside of 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 calender.

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 of the text field
Labels should be above or next to the text field. This maes it clear that the user is able to input a 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 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;
Last updated 22 November 2023
Home
Latest version 2.2.0