Bootstrap: Basic Inputs

Default

Most common form control, text-based Input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

NOTE: The Input component defined here is case sensitive. We have provided this component so that it saves you time by having to write less. The classname form-control is added by default to all types defined above.

<Input type='password' placeholder='Password' />

Disabled input

Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

<Input disabled type='password' placeholder='Password' />

Readonly input

Add the readOnly boolean attribute on an input to prevent user input and style the input as disabled.

<Input readOnly type='password' placeholder='Password' />

Bootstrap: Control Sizing

Set heights using properties like: lg and sm


<Input lg type='text' placeholder='Large Input' />
<Input sm type='text' placeholder='Small Input' />

Bootstrap: Rubix Enhancements [API]

getInputDOMNode()

Access the raw DOM Node. Example:

var demo = React.createClass({
  componentDidMount: function() {
    var node = this.refs.inputelement.getInputDOMNode();
    console.log(node.value === 'Default text');
  },
  render: function() {
    return (
      <Input type='text' ref='inputelement' defaultValue='Default text' />
    );
  }  
});

getChecked()

Access the checked state of a checkbox or radio primitive. Example:

var demo = React.createClass({
  componentDidMount: function() {
    var checked = this.refs.checkboxelement.getChecked();
    console.log(checked === true);
  },
  render: function() {
    return (
      <Input type='checkbox' ref='checkboxelement' defaultChecked />
    );
  }  
});

setChecked(true|false)

Set the checked state of a checkbox or radio primitive. Example:

var demo = React.createClass({
  componentDidMount: function() {
    this.refs.checkboxelement.setChecked(false);
    var checked = this.refs.checkboxelement.getChecked();
    console.log(checked === false);
  },
  render: function() {
    return (
      <Input type='checkbox' ref='checkboxelement' defaultChecked />
    );
  }  
});

getValue()

Convenience function to get the value of the raw input dom element. Example:

var demo = React.createClass({
  componentDidMount: function() {
    var value = this.refs.inputelement.getValue();
    console.log(value === 'Default Value');
  },
  render: function() {
    return (
      <Input type='text' ref='inputelement' defaultValue='Default Value' />
    );
  }  
});