Input fields

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular

<cpc-ds-input-field
    labelText = "Full name"
    fieldValue = "This is text"
    [formControl]="fullNameFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Full name"
    fieldValue = "This is text"
    [formControl]="disableFullNameFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Full name"
    fieldValue = "This is text"
    [readOnlyField] = "true"
    [formControl]="fullNameReadOnlyFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Full name"
    hintText = "Don't disclose personal infos"
    fieldValue = "This is text"
    [readOnlyField] = "false"
    (click)="beep()"
    [formControl]="fullNameFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Password"
    type="password"
    id = 'password'>
</cpc-ds-input-field>

<cpc-ds-input-field
    id = 'additionalDetails'
    inputFormat = "textAreaType"
    [formControl]="textareaFormControl"
    labelText = "Additional Information"
    [showMaxLengthLabel] = "true"
    [maxchar] = "140">
</cpc-ds-input-field>

HTML

<script src="[JS-PLACE-HOLDER]"></script>

<label for="fullname">Full name</label>
<input id="fullname" type="text" autocomplete="off">

<label for="error">Full name *</label>
<input
 aria-required="true"
 aria-invalid="true"
 aria-describedby="errMsg2"
 id="error"
 type="text"
 class="error"
 autocomplete="off">
<div id="errMsg2" class="ds-error">Error message goes here</div>

<label id="fullnameHint">Full name</label>
<p id="hintText" class="hintText">Hint text goes here</p>
<input
 type="text"
 autocomplete="off"
 aria-labelledby="fullnameHint hintText">

<!-- Read Only -->
<label for="fullnameReadonly">Full name</label>
<input
 id="fullnameReadonly"
 readonly
 value="Read only text here"
 type="text"
 autocomplete="off">

<label for="disabled">Full name</label>
<input
 aria-disabled="true"
 disabled
 id="disabled"
 class="disabled"
 type="text"
 autocomplete="off">

<label 
 for="textarea" 
 id="textarea-label">
  Additional Information
</label>

<textarea 
 id="textarea" 
 maxLength="102" 
 aria-labelledby="textarea-label textarea-maxCharacter">
</textarea>

<p 
 id="textarea-maxCharacter" 
 class="maxCharacter">
  102 Character limit here
</p>

<label
 for="textarea2"
 id="textarea2-label">
  Additional Information
</label>

<textarea
 aria-invalid="true"
 aria-describedby="errMsg"
 aria-labelledby="textarea2-label textarea2-maxCharacter"
 id="textarea2"
 class="error"
 maxLength="10">
</textarea>

<p
 aria-live="polite"
 id="textarea2-maxCharacter"
 class="maxCharacter">
  10 Character limit here
</p>

<div
 id="errMsg"
 class="ds-error">
  Error message goes here
</div>

General guidelines

Input fields enable users to submit unique or complex data.

Short input fields are useful for names, addresses or any other piece of information that is unique from user to user.

Long input fields (known as text areas) are ideal for collecting qualitative responses or complex data.

When a user is typing in a password, it should be hidden, unless a user chooses to reveal it.

Positioning

Consider the amount and type of information being asked for when determining the length of the field. Align labels to the top and left of the input field to let users scan quickly.

Input fields are large components and will generally take up most of a form. This is an important consideration when structuring forms.

Helper text

Helper text is a powerful way to influence input field responses, but not always helpful. Consider the value of the helper text you include in your design. If you can’t make a confident case for including some, remove it!

Interaction

States

Input fields have default, focus, active and error states.

1. Default
   In this state, the user hasn’t engaged with the field but is able to.
2. Focus
   In this state, a user has navigated to the input field without a mouse. The component is surrounded by a blue box and can be activated by entering text or pressing spacebar.
3. Disabled
   In this state, an input field is visible but cannot be interacted with. Faded colours are used to distinguish disabled input fields from active ones.
4. Read-only
   In this state, the content of an input field is not interactable. This state is typically used when an input field is filled by a backend process (SKU, order number, etc.).

Accessibility considerations

Screen readers

Use labels to ensure input fields are announced when brought into focus.

Placeholder text

Assistive technologies do not treat placeholder text as labels. Some are not supported and not displayed in older web browsers. It may even make users think that the form input is already filled out.

Use hint text over placeholder text whenever possible. Provide the information that the user needs to fill out the form.

Design specs

General guidelines

Write input field labels in plain language. Inform the users what they should be typing into the fields.

• An input field is used for single-line text input.
• Each input field should be preceded by a label element to describe the expected input.
• Placeholder text can be leveraged as an aid to user input.

Guidelines

Keyboard interaction

When the input field has focus:

• Tab: Moves keyboard focus to the next interactive element on the page
• Shift + Tab: Moves keyboard focus to the previous interactive element on the page
• Character key: Prints the key in the text box
• Left arrow: Moves to the previous character in the input field
• Right arrow: Moves to the next character in the input field

Autocomplete input fields

Autocomplete attributes help users with limited dexterity and cognitive disabilities. A complete list of HTML 5.2 autofill input type purposes is available courtesy of W3C.

Communicating text area character limits

Screen reader users need to be notified of a text area’s character limit. This is best achieved by including:

• A visible character counter. The visible character counter string can also be associated with the label using aria-labelledby.
• A string injected at specific moments with aria-live=”polite” that updates screen reader users on how many characters remain (for example, 0 characters left), maximum characters reached (75%, 50%, 25%, 10%), characters left, and so on.

ARIA roles and properties

The following WAI-ARIA roles and properties can be associated with input fields and text area elements:

• Use a native HTML <input> with type=”text” for single line input or an HTML <textarea> tag for multi-line input. The attribute role="textbox" can be added to the element when designing a customized <input> field.
• Aria-required=”true” must be set to programmatically communicate mandatory fields to screen reader users.
• Aria-invalid=”true” for a field in error.
• Aria-disabled=”true” for a disabled field.
• "readonly" property on a readonly field.
• Aria-live=”polite” on the character count text string should be announced to screen readers. The string is nullified on next key-press.
• Field label, hint text (if present), and character count string (if present) are associated with the field using aria-labelledby. The attribute takes a space separated value of the IDs of the elements containing each string.
• Error text (if present) is associated with the field using aria-describedby. The attribute takes the ID of the error string element as value.

Testing

When testing an input field, the tester must ensure:

• The input field is fully keyboard operable
• Indications for the focused state are clear and prominent
• ARIA properties are correct
• Visible indicators of required fields (for example, “*”) are explained at the top of the form
• Character limits (if present) are announced to the screen reader
• The screen reader announces the field label, field role information, hint text (if present), error text (if present), character count (if present), and announcements for any associated ARIA properties (for example, “required” or “invalid”)
• The correct keyboard type is present for mobile users (for example, the email keyboard for email fields)

Related content

• Dropdown menus
• Checkboxes