node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป


Swiss-Army Input for React v0.0.22


The "swissarmy-input-react" module is a ReactJS-component intended to produce useful and nice-looking inputs, complete with labels. The power of "swissarmy-input-react" is that it takes an interchangeable set of properties and takes care of any discrepancies between creating different types of inputs.

It currently supports text-, number-, select- and date-inputs, with more on the horizon.



npm install swissarmy-input-react


var SwissArmyInput = require('swissarmy-input-react')

        id          : "myInput",
        type        : "number",
        className   : "anInput",
        labelText   : "My input:",
        placeholder : "Type here...",
        value       : "I'm a hot mess!",
        maxLength   : "23"

The properties map to corresponding attributes of the input- or label-elements, but provide extended functionality in the case of the type-property:

The type-property will normally pass a string value to the type-attribute of the input-element, but if passed value is "date" or "select", then a datepicker-/select box-widget is initialized instead.


  • Live indicator for remaining characters (if maxLength-value is provided)
  • Support more input-types
  • Support for specifying date-format