Sprout Social

Components

Input

View on GitHub

Input is a themed version of the native form field that enables a user to interact and input data.

Input fields allow users to enter and interact with data. Often used with form layout, but can exist outside of a standard form.

If you are using an input for a form, check out the component. It handles errors, labels and formatting for you.

You can also refer to our form patterns for guidance on layout, proper usage and accessibility of various form elements.

Best Practices

Input fields should:

  • Use a label that is meaningful, clear, and concise.
  • Use basic help text, do not hide it.
  • Use sentence case and avoid all uppercase.
  • Use the proper input length as an affordance to how much content can be entered.
  • Use inline validation.
  • Use the proper input type in HTML based on the data being collected. e.g., type='email' for email, type='number' for numeric values, type='text' for general text.