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' />
              );
            }

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 style={{ width: '23rem' }}>
                  <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

The input type="text" defines a single-line text field.

        
            
              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

The input field type="email" defines the email address field. The input value is automatically validated to ensure that it is a properly formatted email address.

        
            
              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

The input field type="password" defines a password field, thus hiding characters as confidential information.

        
            
              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

The input type="number" defines field for entering a 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

The input type="tel" defines a field for entering a telephone 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

The input type="url" defines a field for entering a 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

The textarea tag defines a multi-line text input control.

        
            
              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 style={{ width: '22rem' }}>
                  <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 } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <div>
                  <div className='row g-3 align-items-center'>
                    <MDBInput
                      wrapperClass='col-auto'
                      label='Password'
                      type='text'
                      id='formTextExample2'
                      aria-describedby='textExample2'
                    />
                    <div className='col-auto'>
                      <span id='textExample2' className='form-text'>
                        Must be 8-20 characters long.
                      </span>
                    </div>
                  </div>
                </div>
              );
            }

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
className string '' Add custom class to the MDBInput <MDBInput className="class" type="text" id="inputExample" />
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" />
inputRef React.RefObject undefined Reference to input element <MDBInput inputRef={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" />
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} />