Input Field

24.1

Input components allow users to enter and edit information in the interface.

Input Field

24.1

Input components allow users to enter and edit information in the interface.

Input Field

24.1

Input components allow users to enter and edit information in the interface.

Overview

Input components allow users to enter and edit information in the interface. These components follow consistent patterns while addressing specific input needs.

Usage

Prefixes & Suffixes

  • Interactive: Interactive suffixes and prefixes cannot be used as dependent elements for the main input

  • When you have dependencies for the main input, break them into separate inputs

Input Validation

  • Don't Stack Help Text: Error messages should replace help text rather than stacking

  • Inline Validation: This method is now deprecated (considered inaccessible)

  • Long Messages & Truncation: By default, validation messages wrap if they don't fit; truncation is not recommended

Disabled vs Readonly

Disabled:

  • Low color contrast

  • Invisible to screen readers

  • Not focusable

  • No ability to select and copy text

  • Doesn't get submitted to forms

Readonly:

  • High color contrast

  • Visible to screen readers

  • Focusable

  • Ability to select and copy text

  • Input gets submitted to forms

When to use which:

  • Use Disabled when you don't want the user to interact at all or when there's no content

  • Use Readonly when you want users to read/copy content or when content should be submitted without modification

Text Input

  • Standard input for single-line text entry

  • Can include prefixes, suffixes, and validation states

  • Available in multiple sizes and states (normal, error, disabled, readonly)

Content Guidelines

When we use input fields, it is a combination of 3 sub-components.

  • Field Label

  • Input field with placeholder text

  • Help text

Writing for field labels

The label specifies the information we require from the user. A user can provide input through various controls such as text fields, dropdowns, checkboxes, toggles, radio buttons, and upload fields.

Structure: Write only the field name. Do not add an action word because it creates unnecessary repetition.
Casing: Use Title Case and keep proper nouns as is.

Do: Cluster Name
Don't: Enter Cluster Name

Writing placeholder text for an input field

The placeholder text appears inside an empty input field. It guides the user on how to provide the input and improves accessibility by offering immediate context.

Structure: In forms with text fields, write Enter + Field Label. In cases where the user can type and search through a dropdown, say "Search list".
Casing: Use sentence case and keep proper nouns as is.

Do: Enter cluster name

Writing help text or inline text

The help text or inline text appears below the input field. It provides additional clarity or guidance to support accurate user input.

Structure: Keep it clean, concise, and guide the user.
Casing: Use sentence case and keep proper nouns as is.
Punctuation: Use no period for short sentences or sentence fragments. Use full punctuation only when the message is a complete sentence. Do not use exclamation (!) and ellipsis (…).

Help text can include:

  • Contextual guidance: Explains formats, rules, constraints, or additional details required for the field.

✅ Do: Cluster name must contain 3–63 characters and can include letters, numbers, and hyphens.

  • Inline errors: Shown when the user enters incorrect, incomplete, or invalid input. These error messages must guide the user and not blame them.

When the user adds an incorrect or misses adding a manual input, say Enter a valid < field name >
When the user misses adding an input from a dropdown, say Select a < field name >

✅ Do: Enter a valid cluster name
Don't: Invalid cluster name entered.


Accessibility

  • Labels: All inputs must have visible and programmatic labels

  • Formatting: Requirements should be displayed persistently, not as placeholder text

  • Use of Color: Error messages should use icons with text, not rely on color alone

Help make this page more useful.

Help make this page more useful.

Help make this page more useful.