Feature Request: Helper/Hint text for inputs

[ryanyakich]

Short description of the problem:

No easy way to add "helper" or "hint" text to a ion-input field.

What behavior are you expecting?

A way to add helper / hint text to an input field. As per Google's Specs:

Helper text, or hint text, should appear below the text field and either be persistently visible, or only visible on focus.

Maybe 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.

<ion-item>
  <ion-label>Password</ion-label>
  <ion-input type="password"></ion-input>
  <ion-helper-text >Your password isn’t strong enough, try making it longer.</ion-helper-text>
</ion-item>

Steps to reproduce:
Not applicable

Other information:

http://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields

Which Ionic Version? 1.x or 2.x
2.x (beta 7)

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: Not installed
ios-sim version: 4.1.1 
OS: Mac OS X El Capitan
Node Version: v6.2.1
Xcode version: Xcode 7.3.1 Build version 7D1014 

[danbucholtz]

This is a really interesting idea IMO.

[manucorporat]

Here's a developed proposal:

<ion-item>
  <ion-label>Password</ion-label>
  <ion-input type="password"></ion-input>
  <ion-helper>We need a password in order to secure your account</ion-helper>
  <ion-helper focus>Please! At least 6 alphanumeric long</ion-helper>
  <ion-helper success positive>AWESOME! your password looks good!</ion-helper>
  <ion-helper error danger>Your password isn't strong enough, try making it longer.</ion-helper>
</ion-item>

the 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.

<ion-helper>: by default, no success, neither error, or focused. could be used to explain why this is required.
<ion-helper focus>: when the input is focused, you can use it to provide more detailed help
<ion-helper success>: give the user a positive feedback!
<ion-helper fail>: give the user a negative feedback, so they can fix it

@ryanyakich what do you think?

[ryanyakich]

@manucorporat That makes sense to me. I am not sure if maybe it would be better to have it more contained. Also, ion-helper seems a bit ambiguous, maybe ion-input-helper and ion-message inside?

<ion-item>
  <ion-label>Password</ion-label>
  <ion-input type="password"></ion-input>
  <ion-input-helper>
    <ion-message>Default helper text</ion-helper-text>
    <ion-message focus>Hey, I am focused</ion-helper-text>
    <ion-message success>Yay! it looks good!</ion-helper-text>
    <ion-message fail>Oh no! there is an error!</ion-helper-text>
  </ion-input-helper>
</ion-item>

Not sure if that makes sense.

[adamdbradley]

I like ion-message. What do other frameworks (and not just JS frameworks) call these elements?

/cc @brandyscarney

[adamdbradley]

Also, this should be purely CSS.

[RG-AG]

Is there a workaround for this issue?

[theromis]

I want this feature too, any progress on it?

[rpayanm]

Will be nice to have this feature.

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#43

[mnasyrov]

Any update about this feature?

[HudsonAfonso]

+1

[lewisflude]

+1

[wormling]

+1

[enricodeleo]

+1

[jbourjeli]

+1

[Kjetil-Tenold]

+1

[francovp]

+1

[ghost]

+1

[eltonmrk]

+1

[jbejas]

+1

[ZameelAmjed]

+1

[shyaaam]

Its so frustrating to do this manually, and sucks that ionic is not providing this by default..

[jeffersonmello]

+1

[SmirnovM91]

+1

[kak00n]

+1

[Stefanobosio]

+1

[damsorian]

+1

[Zwimber]

+1

[VlnRbn]

+1

[arairyoto]

+1

[RomeoDenis]

+1

[PuriaRad]

+1

[lennonjesus]

+1

[webmalc]

+1

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#100