Input fields

React Bootstrap 5 Input fields component

Input fields refer specifically to the text input fields, which are used to obtain data from the users.

Basic example

A basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input. Both elements are wrapped in .form-outline class which provides a material design look. 

        
            
        import React from 'react'; 
        import { MDBInput } from 'mdb-react-ui-kit'; 
        
        export default function App() {

          return (
            <MDBInput label="Example label" id="form1" type="text" />
          ); 
        }

Controlled value

Add value property to set the value of the input field. You can also use the onChange event to handle the value change.

railing icon 
        
            
            import React, { useState } from 'react';
            import { MDBInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [value, setValue] = useState('');
              
              return (
                <MDBInput
                  value={value}
                  onChange={(e) => setValue(e.target.value)}
                  label='Controlled value'
                  id='controlledValue'
                  type='text'
                />
              );
            }

Sizing

Set heights using properties like size="lg" and size="sm".



        
            
        import React from 'react';
            import { MDBInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
        <div>
          <MDBInput label="Form control lg" id="formControlLg" type="text" size="lg" />
          <br />
          <MDBInput label="Form control default" id="formControlDefault" type="text" />
          <br />
          <MDBInput label="Form control sm" id="formControlSm" type="text" size="sm" />
        </div>
        ); }

Disabled

Add the disabled boolean property on an input to give it a grayed out appearance and remove pointer events. 

        
            
        import React from 'react';
            import { MDBInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
        <MDBInput label="Disabled" id="formControlDisabled" type="text" disabled />
        ); }

Readonly

Add the readonly boolean property on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. 

        
            

        import React from 'react';
            import { MDBInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
        <MDBInput
          label="Readonly"
          placeholder="Readonly input here..."
          id="formControlReadOnly"
          type="text"
          readonly
        />
        ); }

Types

Input types let you specified what data users should provide and help you validate it.

Text

        
            
          import React from 'react';
              import { MDBInput } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
          <MDBInput label="Text input" id="typeText" type="text" />
          ); }

Email

        
            
          import React from 'react';
          import { MDBInput } from 'mdb-react-ui-kit';
      
            export default function App() {
              return (
                <MDBInput label="Email input" id="typeEmail" type="email" />
              ); 
            }

Password

        
            
            import React from 'react';
            import { MDBInput } from 'mdb-react-ui-kit';
      
            export default function App() {
              return (
                <MDBInput label="Password input" id="typePassword" type="password" />
              ); 
            }

Number

        
            
          import React from 'react';
          import { MDBInput } from 'mdb-react-ui-kit';
      
          export default function App() {
            return (
              <MDBInput label="Number input" id="typeNumber" type="number" />
            );
          }

Phone number

        
            
          import React from 'react';
          import { MDBInput } from 'mdb-react-ui-kit';
      
          export default function App() {
            return (
              <MDBInput label="Phone number input" id="typePhone" type="tel" />
            ); 
          }

URL

        
            
          import React from 'react';
          import { MDBInput } from 'mdb-react-ui-kit';
      
          export default function App() {
            return (
              <MDBInput label="URL input" id="typeURL" type="url" />
            ); 
          }

Textarea

        
            
          import React from 'react';
          import { MDBTextArea } from 'mdb-react-ui-kit';
      
          export default function App() {
            return (
              <MDBTextArea label="Message" id="textAreaExample" rows="{4}" />
            ); 
          }

Text

Block-level or inline-level form text can be created using .form-text.

Associating form text with form controls
Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Form text below inputs can be styled with .form-text. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.

We'll never share your email with anyone else. 
        
            
        import React from 'react';
        import { MDBInput } from 'mdb-react-ui-kit';
    
        export default function App() {
          return (
            <div>
              <MDBInput
              label="Example label"
              id="formTextExample1"
              type="text"
             aria-describedby="textExample1"
            />
              <div id="textExample1" className="form-text">
              We'll never share your email with anyone else.
              </div>
            </div>
        ); }

Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.

Must be 8-20 characters long. 
        
            
        import React from 'react';
        import { MDBInput, MDBRow, MDBCol } from 'mdb-react-ui-kit';
    
        export default function App() {
          return (
            <div>
              <MDBRow className="g-3 align-items-center">
                <MDBInput
                 wrapperClass="col-auto"
                 label="Password"
                 type="text"
                 id="formTextExample2"
                 aria-describedby="textExample2"
            />
                <MDBCol size="auto">
                  <span id="textExample2" className="form-text"> 
                    Must be 8-20 characters long. 
                  </span>
                </MDBCol>
              </MDBRow>
            </div>
          ); 
        }

Helper text

Add class form-helper to div to create helper text.

Example helper text
        
            
          import React from 'react'; 
          import { MDBInput } from 'mdb-react-ui-kit'; 
          
          export default function App() { 
            return (
              <MDBInput label='Example label' id='formCounter'>
                <div id='helperTextExample' className='form-helper'>
                  Example helper text
                </div>
              </MDBInput>       
            ); 
          }

Character counter

Set maxLength and showCounter attributes.

        
            
          import React from 'react'; 
          import { MDBInput } from 'mdb-react-ui-kit'; 
          
          export default function App() { 
            return (
              <MDBInput label="Example label" id="formCounter" maxLength="20" showCounter={true} />
            ); 
          }

Icons

Trailing icon

Add class trailing to i tag to create trailing icon in the input. 

        
            
          import React from 'react'; 
          import { MDBInput } from 'mdb-react-ui-kit'; 
          
          export default function App() { 
            return (
              <MDBInput label="Example label" id="form-icon-trailing">
                <i className="fas fa-exclamation-circle trailing"></i> 
              </MDBInput>
            ); 
          }

Dark background

When placing an input on the dark background add contrast property to provide proper contrast. 

        
            
        import React from 'react';
        import { MDBInput } from 'mdb-react-ui-kit';
    
        export default function App() {
          return (
            <MDBInput label="Example label" type="text" id="formWhite" contrast />
          ); 
        }

Input fields - API

Import

        
            
            import { MDBInput, MDBTextArea } from 'mdb-react-ui-kit';

Properties

MDBInput

Name Type Default Description Example
contrast boolean '' Sets the dark background for the MDBInput <MDBInput contrast type="text" id="inputExample" />
defaultValue string '' Default value of the input <MDBInput defaultValue='test' />
disabled string '' Makes the MDBInput disabled <MDBInput disabled type="text" id="inputExample" />
id string '' Defines an id for the MDBInput <MDBInput type="text" id="inputExample" />
ref React.RefObject undefined Reference to input element <MDBInput ref={inputReference} />
label React.ReactNode '' Defines a label text for the MDBInput <MDBInput label="Example label" type="text" id="inputExample" />
labelId string '' Defines an id for the label <MDBInput label="Example label" labelId="exampleLabel" type="text" id="inputExample" />
labelClass string '' Adds custom classes to the label <MDBInput label="Example label" labelId="exampleLabel" labelClass="test-class" type="text" id="inputExample" />
labelRef React.RefObject undefined Reference to label element <MDBInput labelRef={labelReference}
labelStyle React.CSSProperties undefined Adds custom styles to the label <MDBInput label="Example label" labelStyle={{color: 'red'}} />
name string '' Specifies the name for the MDBInput <MDBInput name="sampleName" type="text" id="inputExample" />
readonly boolean false Makes the MDBInput read only <MDBInput readonly type="text" id="inputExample" />
size string '' Sets the size of the MDBInput <MDBInput size="lg" type="text" id="inputExample" />
value string '' Sets the value for the MDBInput <MDBInput value="Example value" type="text" id="inputExample" />
wrapperTag string '' Defines a tag type for the wrapper of the MDBInput <MDBInput wrapperTag="span" id="exampleID" type="text" id="inputExample" />
wrapperClass string '' Adds custom classes to the wrapper of the MDBInput <MDBInput wrapperClass="custom-class" type="text" id="inputExample" />
wrapperStyle React.CSSProperties undefined Adds custom styles to the wrapper <MDBInput label="Example label" wrapperStyle={{color: 'red'}} />

MDBTextArea

Name Type Default Description Example
cols number undefined Textarea cols number <MDBTextArea cols={3} />
rows number undefined Textarea rows number <MDBTextArea rows={3} />