{"id":743,"date":"2018-05-15T16:37:34","date_gmt":"2018-05-15T16:37:34","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=743"},"modified":"2018-06-01T21:33:48","modified_gmt":"2018-06-01T21:33:48","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/text-fields\/usage\/","title":{"rendered":"Form Fields Usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tText Fields<br \/>\n\t<\/h1>\n<h4>\n\t\tText 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.<br \/>\n\t<\/h4>\n<h2>\n\t\tVariants<br \/>\n\t<\/h2>\n<h5>\n\t\tButton Type<br \/>\n\t<\/h5>\n<h5>\n\t\tPurpose<br \/>\n\t<\/h5>\n<p><strong>Text Field<\/strong><\/p>\n<p><strong>Text Area<\/strong><\/p>\n<p><strong>Text field with icon<\/strong><\/p>\n<p><strong>Text field with prefix<\/strong><\/p>\n<p><strong>Text field with suffix<\/strong><\/p>\n<p><strong>Auto suggest text field<\/strong><\/p>\n<p>default<\/p>\n<p>Used for multi line data entry<\/p>\n<p>Example &#8211; calendar icon for a date input<\/p>\n<p>Example: &#8220;https:\/\/&#8221; for web address entry<\/p>\n<p>Example: &#8220;.com&#8221; at the end of a text field for a web address entry<\/p>\n<p>We might auto suggest a system user name based on the first couple of entered letters.<\/p>\n<h2>\n\t\tBest Practices<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Do\" target=\"_self\"><br \/>\n\t\tDo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Use the TextField to accept data input on a form or page.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Label the TextField with a helpful name.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Provide concise helper text that specifies what content is expected to be entered.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>When part of a form, provide clear designations for which fields are required vs. optional.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Provide all appropriate methods for submitting provided data (onEnter or a dedicated \u2018Submit\u2019 button).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Provide all appropriate methods of clearing provided data (\u2018X\u2019 or something similar).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Allow for selection, copy and paste of field data.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>When long entries are expected, provide a mechanism for overflow or expansion of the control itself.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Ensure that the TextField is functional through use of mouse\/keyboard or touch when available.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Ensure that the TextField is accessible through screen reader and\/or other accessibility tools.<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Don&#039;t\" target=\"_self\"><br \/>\n\t\tDon&#8217;t<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Don\u2019t use a TextField to render basic copy as part of a body element of a page.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don\u2019t provide an unlabeled TextField and expect that users will know what to do with it.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don\u2019t place a TextField inline with body copy.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don\u2019t be overly verbose with helper text.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don\u2019t occlude the entry or allow entry when the active content is not visible.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":34,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-743","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=743"}],"version-history":[{"count":6,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/743\/revisions"}],"predecessor-version":[{"id":1179,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/743\/revisions\/1179"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/34"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}