[PatternFly] Entering numeric data in forms

[Jonathan Yu]

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 at 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.
>
> Matt
>
> [1] http://www.patternfly.org/pattern-library/widgets/#bootstrap-touchspin
> [2] https://codepen.io/Thomas-Lebeau/pen/csHqx
>
> --
> Matt Carrano
> Sr. Interaction Designer
> Red Hat, Inc.
> mcarrano at redhat.com
>
> _______________________________________________
> PatternFly mailing list
> PatternFly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>


-- 
Jonathan Yu / Software Engineer, OpenShift by Red Hat / 140-character rants
'n raves <https://twitter.com/jawnsy>

*“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.”* —
Samuel Beckett
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170322/580a8743/attachment.htm>