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.

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

Best practices:

  1. Ensure that the labels are short and concise, so it’s obvious to the user what they should enter into the field.
  2. Make sure your text inputs are far enough apart, so your user doesn’t click on the wrong one by mistake.
  3. 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.

Text input should be used when:

  1. You need users to enter text that is only a single line.
  2. You need freeform answers.
  3. 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. 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

Labels should be placed outside of the text field
Labels should be above or next to the text field. This ensures a clear association between the label and the input field, and is also crucial for screen readers and other assistive technologies.

Do not rely solely on placeholder text to convey critical information
Placeholder text disappears when a text input is filled in, which can make it easy for users to forget the guidance or format instructions, leading to errors or confusion.

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.

Behaviour
Users should be able to click anywhere within the text area to focus. On focus, users can type directly into the text area. Any placeholder text in the field will be replaced when the user begins typing.

Accessibility guidelines

Aria attributes

  1. Use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.

Keyboard accessibility

Ensure that the accordion can be navigated and operated using the keyboard:
  1. Tab to bring focus to the text input.

Focus indicator

  1. Ensure the focus indicator is highly visible. Use a distinct colour that contrasts well with the surrounding elements. Avoid relying on colour alone; consider adding a border or shadow to enhance visibility so that it is accessible to all users, including those with visual impairments.
  2. The focus indicator should encompass the entire text input without altering its size or shape. It should be clear that the focus is on the text input, not another part of the UI.

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 02 October 2024
Home
Latest version 2.3.6