Input components include both required and optional bits of text that help guide users in their use.

Labels

Labels are used to identify both fields and options for some input components. Labels should:

• Be brief, clear, and concise (ex. Loan Term)
• Explain exactly what the field is so that users can easily provide the input needed regardless of the field type (for example, in a free-form text field)
• Use title case

Helper Text

Helper text appears above or below an input to clarify its purpose, format, or syntax. Helper text is often replaced by error messaging when validation fails, so it shouldn’t contain vital information that'll be lost if this happens.

Helper text should:

• Work in tandem with other field-related content such as the label, placeholder text, and error messaging
• Help users complete the field correctly the first time
• Use sentence case with punctuation

<aside> 📌 TODO: Talk to @Shannon Lewis about updated usage examples

</aside>

Placeholder Text and Defaults

Inputs like Text Fields may contain ghosted text that's overwritten when the user begins typing in the input field. Placeholder text always clarifies what input is expected; for example, illustrating a particular format such as a date or phone number.

Placeholders should:

• Provide an example of format or instruction
• Instructional hints should use sentence case
• Start with a verb if instructional
• Not start with “EX” or “e.g.”