diff --git a/src/Input.jsx b/src/Input.jsx
index 85231c093f..91f11dd954 100644
--- a/src/Input.jsx
+++ b/src/Input.jsx
@@ -4,6 +4,7 @@ var classSet = require('./utils/classSet');
var Button = require('./Button');
var Input = React.createClass({
+
propTypes: {
type: React.PropTypes.string,
label: React.PropTypes.node,
@@ -12,6 +13,7 @@ var Input = React.createClass({
addonAfter: React.PropTypes.node,
buttonBefore: React.PropTypes.node,
buttonAfter: React.PropTypes.node,
+ bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
bsStyle: function(props) {
if (props.type === 'submit') {
// Return early if `type=submit` as the `Button` component
@@ -140,8 +142,14 @@ var Input = React.createClass({
) : null;
+ var inputGroupClassName;
+ switch (this.props.bsSize) {
+ case 'small': inputGroupClassName = 'input-group-sm'; break;
+ case 'large': inputGroupClassName = 'input-group-lg'; break;
+ }
+
return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
-
+
{addonBefore}
{buttonBefore}
{children}
diff --git a/test/InputSpec.jsx b/test/InputSpec.jsx
index 4303a0ab64..e3155f1e2c 100644
--- a/test/InputSpec.jsx
+++ b/test/InputSpec.jsx
@@ -123,6 +123,22 @@ describe('Input', function () {
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-addon'));
});
+ it('renders input-group with sm or lg class name when bsSize is small or large', function () {
+ var instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-sm'));
+
+ instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-lg'));
+ });
+
it('renders btn-group', function() {
var instance = ReactTestUtils.renderIntoDocument(
!} />