78 lines
4.5 KiB
Markdown
78 lines
4.5 KiB
Markdown
# Input
|
|
|
|
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.
|
|
|
|
<!-- example -->
|
|
```jsx
|
|
import Input from 'react-toolbox/lib/input';
|
|
|
|
class InputTest extends React.Component {
|
|
state = { name: '', phone: '', email: '', hint: '' };
|
|
|
|
handleChange = (value, ev) => {
|
|
this.setState({ [ev.target.name]: value });
|
|
};
|
|
|
|
render () {
|
|
return (
|
|
<section>
|
|
<Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange} maxLength={16 } />
|
|
<Input type='text' label='Disabled field' disabled />
|
|
<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>} />
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
If you want to provide a theme via context, the component key is `RTInput`.
|
|
|
|
## 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` or `Node` | | 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` or `Node` | `''` | 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` or `Node` | | 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.|
|
|
| `rows` | `Number` | | The number of rows the multiline input field has.|
|
|
| `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.|
|
|
|
|
## Theming
|
|
|
|
| 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.|
|
|
| `label` | Used for the label when the input has a label.|
|
|
| `required` | Used in case the input is required.|
|
|
| `withIcon` | Added to the root class if the input has icon.|
|
|
|
|
## Methods
|
|
|
|
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:
|
|
|
|
- `blur` used to blur the `input` element.
|
|
- `focus` used to focus the `input` element.
|