Text input

Text input field lets users enter and edit short-form content and data. This input does not support line-breaks or text formatting.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms


Configure: select the dropdowns below to display the variety of options that a text input supports.



Responsive preview

Usage best practices

Consider using text input when:

  • users are expected to input text no longer than a single line
  • the input from the users cannot be easily predicted

Usage examples:

  • area to answer a security question
  • address field

Related components:


Align text input label with the input field and ensure it is always visible.

Ensure the size of the text input box reflects the amount of the content user is expected to enter.

Ensure labels and descriptions are clear and easy to understand.


Do not use placeholder text instead of labels.