{"id":34,"date":"2018-04-27T14:55:49","date_gmt":"2018-04-27T14:55:49","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=34"},"modified":"2018-06-01T18:52:26","modified_gmt":"2018-06-01T18:52:26","slug":"text-fields","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/text-fields\/","title":{"rendered":"Text Fields"},"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<h4>\n\t\t<a href=\"#\" title=\"Text Field Default \" target=\"_self\"><br \/>\n\t\tText Field Default<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.input-label-default{\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #54698D;\n}\n.placeholder-default {\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #C6CBD4;\nline-height: 16px;\n}\n.field-box-default {\nborder: 1px solid #A8B7C7;\nborder-radius: 4px;\n}\nOPTIONAL -----\n.value-default {\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #54698D;\nline-height: 15px;\n}\n<b>icon<\/b>\ncolor: #C5D0DE\nsize: 12px\nname: fa-info-circle\n<\/pre>\n<h2>\n\t\tStates<br \/>\n\t<\/h2>\n<p>There are 5 different states for the text field inputs;<\/p>\n<ul>\n<li>default<\/li>\n<li>active<\/li>\n<li>error<\/li>\n<li>validated<\/li>\n<li>disabled<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Active\" target=\"_self\"><br \/>\n\t\tActive<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.<\/p>\n<pre>.input-label-active{\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #0074D9;\n}\n.placeholder-active {\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #C6CBD4;\nline-height: 16px;\n}\n.input-text {\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #0024D1;\nline-height: 16px;\n}\n.field-box-active {\nborder: 1px solid #0074d9;\nborder-radius: 4px;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Error\" target=\"_self\"><br \/>\n\t\tError<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.<\/p>\n<pre>.input-label-error{\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #DC143C;\n}\n.field-box-error {\nborder: 1px solid #DC143C;\nborder-radius: 4px;\n}\nOPTIONAL -----\n.value-error {\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #DC143C;\nline-height: 15px;\n}\n<b>icon - error<\/b>\ncolor: #DC143C\nsize: 12px\nname: fa-info-circle\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Validated\" target=\"_self\"><br \/>\n\t\tValidated<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>This validation variant will only appear when a field is required and the user&#8217;s entry has met the conditions for the input.\u00a0 Most often seen for first name, last name, email, and credit card information.<\/p>\n<pre>.input-label-error{\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #008000;\n}\n.field-box-error {\nborder: 1px solid #008000;\nborder-radius: 4px;\n}\nOPTIONAL -----\n.value-error {\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #008000;\nline-height: 15px;\n}\n<b>icon - validated<\/b>\ncolor: #008000\nsize: 12px\nname: fa-check-circle\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Disabled\" target=\"_self\"><br \/>\n\t\tDisabled<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>This validation variant will only appear when a field is required and the user&#8217;s entry has met the conditions for the input.\u00a0 Most often seen for first name, last name, email, and credit card information.<\/p>\n<p>\t\t\t\t<img decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/05\/Default.svg\" alt=\"Default\" itemprop=\"image\" height=\"52px\" width=\"271px\" title=\"Default\"  \/><\/p>\n<pre>.input-label-disabled{\nopacity:: 50%;\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #54698D;\n}\n.placeholder-disabled {\nopacity:: 50%;\nfont-family: Lato-Regular;\nfont-size: 13px;\ncolor: #C6CBD4;\nline-height: 16px;\n}\n.field-box-disabled {\nopacity:: 50%;\nbackground-color::#E0E5EE;\nborder: 1px solid #A8B7C7;\nborder-radius: 4px;\n}\n<\/pre>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.input-label-default<\/em><\/p>\n<p><em>.placehoder-default<\/em><\/p>\n<p><em>.field-box-defualt<\/em><\/p>\n<p><em>.value-default<\/em><\/p>\n<p><em>.icon-default<\/em><\/p>\n<p><em>.input-label-active<\/em><\/p>\n<p><em>.checkbox-text-disabled<\/em><\/p>\n<p><em>.checkbox-box-disabled<\/em><\/p>\n<p>default text label for checkbox<\/p>\n<p>default checkbox\u00a0<\/p>\n<p>text label used when a checkbox has been selected<\/p>\n<p>selected checkbox\u00a0<\/p>\n<p>text label used when a checkbox has been selected but has been disabled<\/p>\n<p>checkbox used when an item is selected but disabled for the user<\/p>\n<p>text label used when item is disabled<\/p>\n<p>checkbox has been disabled and unchecked<\/p>\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. Text Field Default&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/34","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=34"}],"version-history":[{"count":15,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":1148,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/34\/revisions\/1148"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}