[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]

Re: [PatternFly] Entering numeric data in forms

Hey Matt,

We use <input type="number"> and it seems to work pretty well.  Advantages are better accessibility (your input-spinner example doesn't work correctly when you're in the box and you hit the up-arrow or down-arrow; you have to tab over to the buttons or type values in).  It supports min/max/step settings and you can tack on validations using the normal mechanisms (e.g. enforce a regular _expression_ pattern, mark as required, etc)

I don't know about browser support though, so that might pose an issue for you.  For that I'd check caniuse or the table at the bottom of the MDN page.

There's lots of goodies here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

On Wed, Mar 22, 2017 at 8:47 AM, Matt Carrano <mcarrano redhat com> wrote:
Hi Everyone,

I have been working over the past several weeks to improve the guidance we provide to designers in creating PatternFly compliant forms.  In this regard, I am interested in some input from the community about how you are currently implementing numeric input fields on forms.  By this I mean fields that are intended to take only a numeric value.

We have no specific guidance in PatternFly today, but there is a Bootstrap Touchspin widget in the library for this purpose [1].  I am curious if folks are using that widget and how it is being used.  In my own designs I've tended to prefer something more like this input-spinner [2] with the value right aligned to be adjacent to any units that follow the field.

I'd be interested to hear your thoughts and ideas about this and/or to share examples for forms you've designed and how you've dealt with this issue.  Thanks in advance for your help.


PatternFly mailing list
PatternFly redhat com

Jonathan Yu / Software Engineer, OpenShift by Red Hat / 140-character rants 'n raves

“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.” — Samuel Beckett

[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]