{"action":"created","issue":{"url":"https://api.github.com/repos/driftyco/ionic/issues/6785","repository_url":"https://api.github.com/repos/driftyco/ionic","labels_url":"https://api.github.com/repos/driftyco/ionic/issues/6785/labels{/name}","comments_url":"https://api.github.com/repos/driftyco/ionic/issues/6785/comments","events_url":"https://api.github.com/repos/driftyco/ionic/issues/6785/events","html_url":"https://github.com/driftyco/ionic/issues/6785","id":158742202,"number":6785,"title":"Feature Request: Helper/Hint text for inputs","user":{"login":"ryanyakich","id":1045861,"avatar_url":"https://avatars.githubusercontent.com/u/1045861?v=3","gravatar_id":"","url":"https://api.github.com/users/ryanyakich","html_url":"https://github.com/ryanyakich","followers_url":"https://api.github.com/users/ryanyakich/followers","following_url":"https://api.github.com/users/ryanyakich/following{/other_user}","gists_url":"https://api.github.com/users/ryanyakich/gists{/gist_id}","starred_url":"https://api.github.com/users/ryanyakich/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryanyakich/subscriptions","organizations_url":"https://api.github.com/users/ryanyakich/orgs","repos_url":"https://api.github.com/users/ryanyakich/repos","events_url":"https://api.github.com/users/ryanyakich/events{/privacy}","received_events_url":"https://api.github.com/users/ryanyakich/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/driftyco/ionic/labels/feature","name":"feature","color":"84b6eb"},{"url":"https://api.github.com/repos/driftyco/ionic/labels/v2","name":"v2","color":"313744"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-06-06T18:24:15Z","updated_at":"2016-06-08T13:30:43Z","closed_at":null,"body":"#### Short description of the problem:\r\nNo easy way to add \"helper\" or \"hint\" text to a `ion-input` field. \r\n\r\n#### What behavior are you expecting?\r\nA way to add helper / hint text to an input field. As per Google's Specs:\r\n\r\n> Helper text, or hint text, should appear below the text field and either be persistently visible, or only visible on focus.\r\n\r\nMaybe similar to ion-label's \"inline / fixed / stacked / floating\" having the ability for the message to be persistently visible, or only visible on focus.  As well as accept color variables \"danger\" or \"warning\" could be useful for validation.\r\n\r\n```\r\n<ion-item>\r\n  <ion-label>Password</ion-label>\r\n  <ion-input type=\"password\"></ion-input>\r\n  <ion-helper-text >Your password isn’t strong enough, try making it longer.</ion-helper-text>\r\n</ion-item>\r\n```\r\n\r\n**Steps to reproduce:**\r\nNot applicable\r\n\r\n**Other information:**\r\n \r\nhttp://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields\r\n\r\n\r\n**Which Ionic Version?** 1.x or 2.x\r\n2.x (beta 7)\r\n\r\n**Run `ionic info` from terminal/cmd prompt:** (paste output below)\r\n```\r\nCordova CLI: 6.1.1\r\nGulp version:  CLI version 3.9.0\r\nGulp local:   Local version 3.9.1\r\nIonic Framework Version: 2.0.0-beta.7\r\nIonic CLI Version: 2.0.0-beta.25\r\nIonic App Lib Version: 2.0.0-beta.15\r\nios-deploy version: Not installed\r\nios-sim version: 4.1.1 \r\nOS: Mac OS X El Capitan\r\nNode Version: v6.2.1\r\nXcode version: Xcode 7.3.1 Build version 7D1014 \r\n\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/driftyco/ionic/issues/comments/224589074","html_url":"https://github.com/driftyco/ionic/issues/6785#issuecomment-224589074","issue_url":"https://api.github.com/repos/driftyco/ionic/issues/6785","id":224589074,"user":{"login":"manucorporat","id":127379,"avatar_url":"https://avatars.githubusercontent.com/u/127379?v=3","gravatar_id":"","url":"https://api.github.com/users/manucorporat","html_url":"https://github.com/manucorporat","followers_url":"https://api.github.com/users/manucorporat/followers","following_url":"https://api.github.com/users/manucorporat/following{/other_user}","gists_url":"https://api.github.com/users/manucorporat/gists{/gist_id}","starred_url":"https://api.github.com/users/manucorporat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/manucorporat/subscriptions","organizations_url":"https://api.github.com/users/manucorporat/orgs","repos_url":"https://api.github.com/users/manucorporat/repos","events_url":"https://api.github.com/users/manucorporat/events{/privacy}","received_events_url":"https://api.github.com/users/manucorporat/received_events","type":"User","site_admin":false},"created_at":"2016-06-08T13:30:43Z","updated_at":"2016-06-08T13:30:43Z","body":"Here's a developed proposal:\r\n```html\r\n<ion-item>\r\n  <ion-label>Password</ion-label>\r\n  <ion-input type=\"password\"></ion-input>\r\n  <ion-helper>We need a password in order to secure your account</ion-helper>\r\n  <ion-helper focus>Please! At least 6 alphanumeric long</ion-helper>\r\n  <ion-helper success positive>AWESOME! your password looks good!</ion-helper>\r\n  <ion-helper error danger>Your password isn't strong enough, try making it longer.</ion-helper>\r\n</ion-item>\r\n```\r\n\r\nthe idea of `ion-helper` is to have a declarative way to insert help texts in inputs. ONLY one helper can be shown at a time.\r\n\r\n`<ion-helper>`: by default, no success, neither error, or focused. could be used to explain why this is required.\r\n`<ion-helper focus>`: when the input is focused, you can use it to provide more detailed help\r\n`<ion-helper success>`: give the user a positive feedback!\r\n`<ion-helper fail>`: give the user a negative feedback, so they can fix it\r\n\r\n@ryanyakich what do you think?\r\n\r\n"}}
{"actor":{"display_login":"manucorporat"}}