Text fields are used to collect information within the context of a form or as an input for a subsequent action. Supported types include text, password, number, email and textarea.

Best practices 

  • Ensure every text field includes a clear label which outlines which information should be entered in the field
  • Leverage placeholders to showcase an example instead of giving instructions
  • As required, use the field description to further describe the purpose of a field and/or include instructions on how to complete the field and describe how the information within will be used
  • For “Optional” fields, which aren't required, include "(Optional)" within the placeholder
  • When a field is a value include its unit within the field is possible 

 

Anatomy

Textfield (3)

1. Field label
Label for the text field.

2. Field description
Use to include help, instructions or explaining how the field's information will be used.

3. Error message
Use to show an error message, as required.

4. Placeholder text
Use to set expectactions about the type of interaction / information required and indicating if a field is optional.

5. Text field
Use for short strings of text.

6. Text area
Use when text may span multiple lines.

7. Value field
Use for numeric fields, optionally can include a left or right unit/icon.

8. Search field
Use to indicate the field will trigger a search behaviour.

 

Specifications

View developer docs

 

HeroLogo
 
© Copyright 2019 BigCommerce
 
 
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us