Bootstrap inputs

MDB provides several form control styles, layout options, and custom components for creating a wide variety of forms.

All of them are created in beautiful, material design style.


Input fields

Basic example

                            
<!-- Material input -->
<Input label="Example label" />
                    
<!-- Default input -->
<label for="exampleForm2">Default input</label>
<input type="text" id="exampleForm2" className="form-control">

Small input

                            
<Input label="Example label" size="sm" />
                    

<!-- Small input -->
<input className="form-control form-control-sm" type="text" placeholder="Small input">

Icon Prefixes

                
<Input label="Example label" icon="envelope" />
            

Placeholder

                            
<Input label="Example label" hint="placeholder" />
                            

Prefilling Text Inputs

                            
<Input label="Example label" defaultValue="John Doe" />
                            

Disabled input

Add the disabled boolean attribute on an input to prevent user interactions.

                            
<Input label="Example label" disabled />
                            
<!-- Default input -->
<label for="inputDisabledEx2" className="disabled">Example label</label>
<input type="text" id="inputDisabledEx2" className="form-control" disabled>

Form layouts

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Inline forms:

Use the FormInline component to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:

  • Controls are display: inline-block to provide alignment control via vertical-align and margin.
  • Controls receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 768px wide to account for narrow viewports on mobile devices.

Because of this, you may need to address the width and alignment of individual form controls manually. Lastly, as shown below, you should always include a <label> with each form control.

                            
        <FormInline>
          <Input label="Type your email" icon="envelope" group type="email" />
          <Input label="Type your password" icon="lock" group type="password" />
          <Button>Login</Button>
        </FormInline>
                            

Using the Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes (or mixins). Add the .row class to form groups and use the .col-* classes to specify the width of your labels and controls.

                            
<form>
    <!--First row-->
    <div className="row">
        <!--First column-->
        <div className="col-md-6">
          <Input label="Example label" icon="envelope" />
        </div>

        <!--Second column-->
        <div className="col-md-6">
            <Input label="Example label" icon="lock" />
        </div>
    </div>
    <!--/.First row-->

    <!--Second row-->
    <div className="row">
        <!--First column-->
        <div className="col-md-12">
          <Input type="textarea" label="Basic textarea"/>
        </div>
    </div>
    <!--/.Second row-->

    <!--Third row-->
    <div className="row">

        <!--First column-->
        <div className="col-md-4">
            <Input label="Example label" />
        </div>

        <!--Second column-->
        <div className="col-md-4">
            <Input label="Example label" />
        </div>

        <!--Third column-->
        <div className="col-md-4">
            <Input label="Example label" />
        </div>

    </div>
    <!--/.Third row-->
</form>
                            

Textarea

                
<!--Basic textarea-->
<Input type="textarea" label="Basic textarea"/>

<!--Textarea with icon prefix-->
<Input type="textarea" label="Icon Prefix" icon="pencil"/>
            

Numeric input

                
<InputNumeric min={5} max={15} value={10} className="mb-2"/>
<InputNumeric precision={2} value={50.3} step={0.1} className="mb-2"/>
<InputNumeric precision={2} value={50.3} step={0.5} snap className="mb-2"/>
                
            

Radio buttons MDB Pro component

Basic examples

                            
class InputPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radio: false
    }
    this.onClick1 = this.onClick1.bind(this);
    this.onClick2 = this.onClick2.bind(this);
    this.onClick3 = this.onClick3.bind(this);
  }

  onClick1() {
    this.setState({radio: 1});
  }

  onClick2() {
    this.setState({radio: 2});
  }

  onClick3() {
    this.setState({radio: 3});
  }

  render () {
    return (
        <div>
            <Input onClick={this.onClick1} checked={this.state.radio === 1 ? true : false} label="Option 1" type="radio" id="radio1" />
            <Input onClick={this.onClick2} checked={this.state.radio === 2 ? true : false} label="Option 2" type="radio" id="radio2" />
            <Input onClick={this.onClick3} checked={this.state.radio === 3 ? true : false} label="Option 3" type="radio" id="radio3" />
        </div>
    );
  }
}
                            
                            

Radio buttons with gap

                            
class InputPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radio2: false
    }

    this.onClick4 = this.onClick4.bind(this);
    this.onClick5 = this.onClick5.bind(this);
    this.onClick6 = this.onClick6.bind(this);
  }

  onClick4() {
    this.setState({radio2: 4});
  }

  onClick5() {
    this.setState({radio2: 5});
  }

  onClick6() {
    this.setState({radio2: 6});
  }

  render () {
    return (
        <div>
            <Input gap onClick={this.onClick4} checked={this.state.radio2 === 4 ? true : false} label="Option 1" type="radio" id="radio4" />
            <Input gap onClick={this.onClick5} checked={this.state.radio2 === 5 ? true : false} label="Option 2" type="radio" id="radio5" />
            <Input gap onClick={this.onClick6} checked={this.state.radio2 === 6 ? true : false} label="Option 3" type="radio" id="radio6" />
        </div>
    );
  }
}
                            
                            

Inline radio buttons

                            
class InputPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radio3: false
    }
    this.onClick7 = this.onClick7.bind(this);
    this.onClick8 = this.onClick8.bind(this);
    this.onClick9 = this.onClick9.bind(this);
  }

  onClick7() {
    this.setState({radio3: 7});
  }

  onClick8() {
    this.setState({radio3: 8});
  }

  onClick9() {
    this.setState({radio3: 9});
  }

  render () {
    return (
        <div>
            <Input onClick={this.onClick7} checked={this.state.radio3 === 7 ? true : false} label="Option 1" type="radio" id="radio7" />
            <Input onClick={this.onClick8} checked={this.state.radio3 === 8 ? true : false} label="Option 2" type="radio" id="radio8" />
            <Input onClick={this.onClick9} checked={this.state.radio3 === 9 ? true : false} label="Option 3" type="radio" id="radio9" />
        </div>
    );
  }
}
                            
                            

Switch MDB Pro component


Disabled:
                
<!-- Switch -->
<InputSwitch></InputSwitch>

<!-- Disabled Switch -->
<InputSwitch disabled></InputSwitch>
                
            

File input MDB Pro component

Basic example

Choose file
                            
                                import React from 'react';
                                import { Container, InputFile } from 'mdbreact';

                                class InputPage extends React.Component {

                                  fileInputHandler = (files) => {
                                    console.log(files) // returns FileList object
                                  }

                                  render () {
                                    return (
                                      <Container className="mt-5">
                                        <InputFile getValue = { this.fileInputHandler }></InputFile>
                                      </Container>
                                    );
                                  }
                                }

                                export default InputPage;
                                                            
                            

Multiple files

For uploading multiple files add a multiple attribute to the input

Choose files
                            
<InputFile multiple btnColor="info"></InputFile>
                            
                            

Range MDB Pro component

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.

                        
<InputRange min={0} max={100} value={50}></InputRange>
                        
                        

getValue prop

You can get inputs value by using getValue prop. It returns value of Input component on onChange event. An example is shown bellow.

            

            import React from 'react';
            import { Container, InputFile } from 'mdbreact';

            class InputPage extends React.Component {

              fileInputHandler = (value) => {
                console.log(value)  // returns FileList
              }

              render () {
                return (
                  <InputFile getValue = { this.fileInputHandler }></InputFile>
                );
              }
            }

            export default InputPage;