Vitaliy Filippov ba3993c811 | ||
---|---|---|
.. | ||
Input.d.ts | ||
Input.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
readme.md
Input
Although we are calling them Inputs they actually correspond to Material Design Text fields. It allows a user to input text and it's the base for other components like the autocomplete.
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 section for details on how to do this. The methods included for the Input
are:
blur
used to blur theinput
element.focus
used to focus theinput
element.