History

Javi Velasco 547aceb4e4 Merge branch 'dev' * dev: Get rid of jsx extensions 🔮 Fix linter error for layouts Fix #407 Fix #425 Fix #442 Fix checking if key exists in Autocomplete Remove App from components index Add inputClassName prop to DatePicker and TimePicker Adapt pickers to calculate position with scroll Update linting Remove unneeded App Refactor Overlay into two components and make activable components render only when needed Use sass lint Lint spec files Bugfix: style for svg icons in button Reduce list unneeded markup Update documentation dependencies Update dependencies, linter and rules updates package.json to work with react 15 Make drawer compliant with material design guidelines.		2016-04-10 21:54:47 +02:00
..
Input.js	Get rid of jsx extensions 🔮	2016-04-10 21:23:04 +02:00
_config.scss	Merge pull request #439 from csmcanarney/patch-1	2016-04-09 20:44:05 +02:00
index.js	Remove jsx extension from imports in components	2015-11-28 20:24:46 +01:00
readme.md	Changed Icon Prop type to String or Element instead of Any. Also fixed an inappropriate example for checkbox.	2016-04-06 21:24:31 -04:00
style.scss	Use sass lint	2016-04-10 12:20:59 +02:00

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 = (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.