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


            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 { MDBInput } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBInput label='Message' id='textAreaExample' textarea 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 } 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" />
size String '' Sets the size of the MDBInput <MDBInput size="lg" type="text" id="inputExample" />
contrast Boolean '' Sets the dark background for the MDBInput <MDBInput contrast type="text" id="inputExample" />
textarea Boolean '' Changes an MDBInput component into a textarea <MDBInput textarea rows={4} type="text" id="inputExample" />
name String '' Specifies the name for the MDBInput <MDBInput name="sampleName" type="text" id="inputExample" />
value String '' Sets the value for the MDBInput <MDBInput value="Example value" type="text" id="inputExample" />
id String '' Defines an id for the MDBInput <MDBInput type="text" id="inputExample" />
label String '' 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" />
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" />
disabled String '' Makes the MDBInput disabled <MDBInput disabled type="text" id="inputExample" />
readonly String '' Makes the MDBInput read only <MDBInput readonly type="text" id="inputExample" />