Search...

Input

React Bootstrap 5 Input

React Bootstrap 5 Input is a specific field that receives data from the user. It's primarily used in a variety of web-based forms.

Importing the React Bootstrap 5 Input Component

You begin by importing CDBInput into your project to use the Contrast React Bootstrap 5 Input component.

js
import { CDBInput } from 'cdbreact';

Default Input Types

Here are examples of input types supported by CDBInput

Checkbox
Radio
js
import React from 'react';
import { CDBInput, CDBBox, CDBContainer } from 'cdbreact';
const Input = () => {
return (
<CDBContainer>
<CDBInput type="text" placeholder="Text" color="primary" />
<CDBInput type="number" placeholder="Numbers" />
<CDBInput type="email" placeholder="Email" />
<CDBInput type="password" placeholder="Password" />
<CDBInput type="date" placeholder="Date" />
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="checkbox" id="checkbox" />
<span style={{ marginLeft: '5px' }}>Checkbox</span>
</CDBBox>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="radio" id="radio" />
<span style={{ marginLeft: '5px' }}>Radio</span>
</CDBBox>
<CDBInput type="textarea" placeholder="TextArea" />
</CDBContainer>
);
};
export default Input;

Color Variations

You can use the color prop to define the color and backgroud type for the input. The default color property is dark

Primary
Primary
Secondary
Secondary
Danger
Danger
Success
Success
js
import React from 'react';
import { CDBInput, CDBContainer, CDBBox } from 'cdbreact';
const Input = () => {
return (
<CDBContainer>
<CDBInput placeholder="Primary" background color="primary" />
<CDBInput placeholder="Secondary" background color="secondary" />
<CDBInput placeholder="Success" background color="success" />
<CDBInput placeholder="Danger" background color="danger" />
<CDBInput placeholder="Warning" background color="warning" />
<CDBInput placeholder="Info" background color="info" />
<CDBInput placeholder="Dark" background color="dark" />
<CDBBox style={{ width: '100%', flexWrap: 'wrap' }}>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="checkbox" id="checkboxPrimary" checked color="primary" />
<span style={{ marginLeft: '5px' }}>Primary</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="radio" id="radioPrimary" color="primary" />
<span style={{ marginLeft: '5px' }}>Primary</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="checkbox" id="checkboxSecondary" checked color="secondary" />
<span style={{ marginLeft: '5px' }}>Secondary</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="radio" id="radioSecondary" color="secondary" />
<span style={{ marginLeft: '5px' }}>Secondary</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="checkbox" id="checkboxDanger" checked color="danger" />
<span style={{ marginLeft: '5px' }}>Danger</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="radio" id="radioDanger" color="danger" />
<span style={{ marginLeft: '5px' }}>Danger</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="checkbox" id="checkboxSuccess" checked color="success" />
<span style={{ marginLeft: '5px' }}>Success</span>
</CDBBox>
</CDBContainer>
<CDBContainer>
<CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
<CDBInput type="radio" id="radioSuccess" color="success" />
<span style={{ marginLeft: '5px' }}>Success</span>
</CDBBox>
</CDBContainer>
</CDBBox>
</CDBContainer>
);
};
export default Input;

Input Sizing

js
import React from 'react';
import { CDBInput, CDBContainer } from 'cdbreact';
const Input = () => {
return (
<CDBContainer>
<CDBInput fontSize={16} size="lg" placeholder="Primary" />
<CDBInput placeholder="Primary" />
<CDBInput fontSize={12} size="sm" placeholder="Primary" />
</CDBContainer>
);
};
export default Input;

Input with icons

js
import React from 'react';
import { CDBInput, CDBContainer } from 'cdbreact';
const Input = () => {
return (
<CDBContainer>
<CDBInput placeholder="Username" icon={<i className="fa fa-profile text-dark"></i>} />
<CDBInput placeholder="email" type="email" icon={<i className="fa fa-email text-dark"></i>} />
</CDBContainer>
);
};
export default Input;

Disabled Inputs

js
import React from 'react';
import { CDBInput, CDBContainer } from 'cdbreact';
const Input = () => {
return (
<CDBContainer>
<CDBInput disabled type="email" placeholder="Your E-mail" />
</CDBContainer>
);
};
export default Input;

Contrast React Bootstrap 5 Input Props

This section will expand on the props available with the React Bootstrap 5 Input component. You'll learn what these props do, how to utilize them, and what their default values are.

Other prop options for the CDBInput component are listed in the table below

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBInput className="myClass" ... />
placeholderStringSets the placeholder for the Input<CDBInput placeholder="Placeholder" ... />
valueNumber, Boolean or StringThe value of the input element (use with the controlled input)<CDBInput value="I am controlled" onChange={this.handleChange} ... />
valueDefaultNumber or StringThe default value of the input (use with the uncontrolled input)<CDBInput valueDefault="I am uncontrolled" ... />
idStringRequired! Set the id of the input element<CDBInput id="myId" ... />
sizeStringChanges size of the component; available lg and sm<CDBInput size="lg" ... />
typeStringtextThe type of the input element<CDBInput type="checkbox" ... />
iconnodeAdds font awesome icon<CDBInput icon={<i className="fa fa-user"></i>} ... />
disabledBooleanfalseDisables Input component<CDBInput disabled .../>
backgroundBooleadfalseEnables Background of Input<CDBInput background .../>
colorStringdarkDefines Background and color of Input<CDBInput color="primary" .../>
focusedBooleanfalseDefines focused state of Input<CDBInput focused .../>
fontSizeNumber14Defines defualt font size of Input<CDBInput fontSize={14} .../>
getValueFunctionRetrieves value of Input onchange<CDBInput getValue={()=>()} .../>
inputClassNameStringAdds custom classes to input<CDBInput iconClassName="myIconClass" ... />
labelClassNameStringAdds custom classes to label<CDBInput labelClassName="myLabelClass" ... />
onBlurFunctionto be called when Input is blurred<CDBInput onBlur={()=>()} .../>
onChangedFunctionto be called when Input value is changed<CDBInput onChange={()=>()} .../>
onFocusFunctionto be called when Input is focused<CDBInput onFocus={()=>()} .../>
onInputFunction<CDBInput onInput={()=>()} .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner