react-toolbox-build4server/react-toolbox/js/input/readme.md

Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project

# Input

Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.

<!-- example -->
```jsx
import Input from 'react-toolbox/lib/input';

class InputTest extends React.Component {
  state = { name: '', phone: '', email: '', hint: '' };

  handleChange = (name, value) => {
    this.setState({...this.state, [name]: value});
  };

  render () {
    return (
      <section>
        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
        <Input type='text' label='Disabled field' disabled />
        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
      </section>
    );
  }
}
```

## Properties

| Name            | Type                    | Default         | Description|
|:-----|:-----|:-----|:-----|
| `className`     | `String`                | `''`            | Sets a class name to give custom styles.|
| `disabled`      | `Boolean`               | `false`         | If true, component will be disabled.|
| `error`         | `String`                |                 | Give an error node to display under the field.|
| `floating`      | `Boolean`               | `true`          | Indicates if the label is floating in the input field or not.|
| `hint`          | `String`                | `''`            | The text string to use for hint text element.|
| `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
| `label`         | `String`                |                 | The text string to use for the floating label element.|
| `maxLength`     | `Number`                |                 |Specifies the maximum number of characters allowed in the component.|
| `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
| `onBlur`        | `Function`              |                 | Callback function that is fired when component is blurred.|
| `onChange`      | `Function`              |                 | Callback function that is fired when the component's value changes.|
| `onFocus`       | `Function`              |                 | Callback function that is fired when component is focused.|
| `onKeyPress`    | `Function`              |                 | Callback function that is fired when a key is pressed.|
| `required`      | `Boolean`               | `false`         | If true, the html input has a required attribute.|
| `type`          | `String`                | `text`          | Type of the input element. It can be a valid HTML5 input type|
| `value`         | `Any`                   |                 | Current value of the input element.|

## Methods

The input is stateless but it includes two methods to be able to communicate with the DOM input node:

- `blur` to blur the input field.
- `focus` to focus the input field.