2015-07-01 09:38:07 +03:00
# Input
2016-11-06 22:18:36 +03:00
Although we are calling them Inputs they actually correspond to Material Design [Text fields ](https://material.google.com/components/text-fields.html ). It allows a user to input text and it's the base for other components like the autocomplete.
2015-11-01 10:41:40 +03:00
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Input from 'react-toolbox/lib/input';
2015-07-01 09:38:07 +03:00
2015-11-08 01:38:26 +03:00
class InputTest extends React.Component {
2016-03-25 16:53:24 +03:00
state = { name: '', phone: '', email: '', hint: '' };
2015-11-08 01:38:26 +03:00
2017-05-22 19:28:16 +03:00
handleChange = (value, ev) => {
this.setState({ [ev.target.name]: value });
2015-11-08 01:38:26 +03:00
};
render () {
return (
< section >
2017-05-22 19:28:16 +03:00
< Input type = 'text' label = 'Name' name = 'name' value = {this.state.name} onChange = {this.handleChange} maxLength = {16 } / >
2015-11-08 01:38:26 +03:00
< Input type = 'text' label = 'Disabled field' disabled / >
2017-05-22 19:28:16 +03:00
< Input type = 'email' label = 'Email address' name = 'email' icon = 'email' value = {this.state.email} onChange = {this.handleChange} / >
< Input type = 'tel' label = 'Phone' name = 'phone' icon = 'phone' value = {this.state.phone} onChange = {this.handleChange} / >
< Input type = 'text' label = 'Required Field' name = 'hint' hint = 'With Hint' required value = {this.state.hint} onChange = {this.handleChange} icon = {<span > J< / span > } />
2015-11-08 01:38:26 +03:00
< / section >
);
}
}
2015-07-01 09:38:07 +03:00
```
2016-05-28 18:58:43 +03:00
If you want to provide a theme via context, the component key is `RTInput` .
2015-07-01 09:38:07 +03:00
## Properties
2016-04-07 04:24:31 +03:00
| Name | Type | Default | Description|
2015-11-01 10:41:40 +03:00
|:-----|:-----|:-----|:-----|
2016-04-07 04:24:31 +03:00
| `className` | `String` | `''` | Sets a class name to give custom styles.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
2016-12-14 05:42:24 +03:00
| `error` | `String` or `Node` | | Give an error node to display under the field.|
2016-04-07 04:24:31 +03:00
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
2016-12-14 05:42:24 +03:00
| `hint` | `String` or `Node` | `''` | The text string to use for hint text element.|
2016-04-07 04:24:31 +03:00
| `icon` | `String` or `Element` | | Name of an icon to use as a label for the input.|
2016-12-14 05:42:24 +03:00
| `label` | `String` or `Node` | | The text string to use for the floating label element.|
2016-10-13 03:15:33 +03:00
| `maxLength` | `Number` | | Specifies the maximum number of characters allowed in the component.|
2016-04-07 04:24:31 +03:00
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
2016-10-13 03:15:33 +03:00
| `rows` | `Number` | | The number of rows the multiline input field has.|
2016-04-07 04:24:31 +03:00
| `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.|
2015-07-01 09:38:07 +03:00
2016-05-21 19:57:49 +03:00
## Theming
2015-07-01 09:38:07 +03:00
2016-05-21 19:57:49 +03:00
| Name | Description|
|:-----------|:-----------|
| `bar` | Used for the bar under the input.|
| `counter` | Used for the counter element.|
| `disabled` | Added to the root class when input is disabled.|
| `error` | Used for the text error.|
| `errored` | Added to the root class when input is errored.|
| `hidden` | Used when the input is hidden.|
| `hint` | Used for the hint text.|
| `icon` | Used for the icon in case the input has icon.|
| `input` | Used as root class for the component.|
| `inputElement` | Used for the HTML input element.|
2016-07-11 21:34:25 +03:00
| `label` | Used for the label when the input has a label.|
2016-05-21 19:57:49 +03:00
| `required` | Used in case the input is required.|
| `withIcon` | Added to the root class if the input has icon.|
2016-08-02 22:51:13 +03:00
## Methods
2017-11-16 21:11:31 +03:00
The `Input` component has some imperative methods that are used as a bypass to the native rendered DOM element. To call this methods you will need to retrieve the instance of the component. Check the [Install ](http://react-toolbox.io/#/install ) section for details on how to do this. The methods included for the `Input` are:
2016-08-02 22:51:13 +03:00
- `blur` used to blur the `input` element.
- `focus` used to focus the `input` element.