<div dir="ltr"><div>Hey Matt,<br><br>We use <span style="font-family:monospace,monospace"><input type="number"></span> 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)<br><br></div><div>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.<br></div><div><br></div>There's lots of goodies here: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input</a><br><div><div><div><div><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Mar 22, 2017 at 8:47 AM, Matt Carrano <span dir="ltr"><<a target="_blank" href="mailto:mcarrano@redhat.com">mcarrano@redhat.com</a>></span> wrote:<br><blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex" class="gmail_quote"><div dir="ltr"><div><div><div><div>Hi Everyone,<br><br></div>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.<br><br></div>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.<br><br></div>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.<br><br></div>Matt<br><div><div><br>[1] <a target="_blank" href="http://www.patternfly.org/pattern-library/widgets/#bootstrap-touchspin">http://www.patternfly.org/<wbr>pattern-library/widgets/#<wbr>bootstrap-touchspin</a><br>[2] <a target="_blank" href="https://codepen.io/Thomas-Lebeau/pen/csHqx">https://codepen.io/Thomas-<wbr>Lebeau/pen/csHqx</a><span class="gmail-HOEnZb"><font color="#888888"><br clear="all"><div><div><div><br>-- <br><div class="gmail-m_-8877351112915741751gmail_signature"><div dir="ltr"><div><div><div>Matt Carrano<br></div>Sr. Interaction Designer<br></div>Red Hat, Inc.<br></div><a target="_blank" href="mailto:mcarrano@redhat.com">mcarrano@redhat.com</a><br></div></div>
</div></div></div></font></span></div></div></div>
<br>______________________________<wbr>_________________<br>
PatternFly mailing list<br>
<a href="mailto:PatternFly@redhat.com">PatternFly@redhat.com</a><br>
<a target="_blank" rel="noreferrer" href="https://www.redhat.com/mailman/listinfo/patternfly">https://www.redhat.com/<wbr>mailman/listinfo/patternfly</a><br>
<br></blockquote></div><br><br clear="all"><br>-- <br><div class="gmail_signature"><div dir="ltr"><div style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><span><span>Jonathan</span><span> </span><span>Yu</span><span> </span></span>/<span> </span><span>Software Engineer</span>,<span> </span><span>OpenShift</span><span> </span>by<span> </span><span>Red Hat</span><span> </span>/<span> </span><a target="_blank" style="color:rgb(49,175,89);text-decoration:none" href="https://twitter.com/jawnsy">140-character rants 'n raves</a></div><br style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><i style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px">“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.”</i><span style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;display:inline;float:none"><span> </span>— Samuel Beckett</span></div></div>
</div></div></div></div></div></div>