Components

Text Fields

Text fields allow our customer to enter, select, and search for text. Text inputs are used all throughout the Neon ecosystem and play a huge part in the how the product functions. Common text input types include: first name, last name, event title, emails, addresses, and plain text searches.

Variants

Button Type
Purpose

Text Field

Text Area

Text field with icon

Text field with prefix

Text field with suffix

Auto suggest text field

default

Used for multi line data entry

Example - calendar icon for a date input

Example: "https://" for web address entry

Example: ".com" at the end of a text field for a web address entry

We might auto suggest a system user name based on the first couple of entered letters.

Best Practices

Do

  • Use the TextField to accept data input on a form or page.

 

  • Label the TextField with a helpful name.

 

  • Provide concise helper text that specifies what content is expected to be entered.

 

  • Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error).

 

  • When part of a form, provide clear designations for which fields are required vs. optional.

 

  • Provide all appropriate methods for submitting provided data (onEnter or a dedicated ‘Submit’ button).

 

  • Provide all appropriate methods of clearing provided data (‘X’ or something similar).

 

  • Allow for selection, copy and paste of field data.

 

  • Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc).

 

  • When long entries are expected, provide a mechanism for overflow or expansion of the control itself.

 

  • Ensure that the TextField is functional through use of mouse/keyboard or touch when available.

 

  • Ensure that the TextField is accessible through screen reader and/or other accessibility tools.

Don't

  • Don’t use a TextField to render basic copy as part of a body element of a page.

 

  • Don’t provide an unlabeled TextField and expect that users will know what to do with it.

 

  • Don’t place a TextField inline with body copy.

 

  • Don’t be overly verbose with helper text.

 

  • Don’t occlude the entry or allow entry when the active content is not visible.