react-toolbox/components/input
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.