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.
import { CDBInput } from 'cdbreact';
Default Input Types
Here are examples of input types supported by CDBInput
import React from 'react';import { CDBInput, CDBContainer } from 'cdbreact';
export 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" /> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="checkbox" id="checkbox" /> <span style={{ marginLeft: '5px' }}>Checkbox</span> </Box> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="radio" id="radio" /> <span style={{ marginLeft: '5px' }}>Radio</span> </Box> <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
import React from 'react';import { CDBInput, CDBContainer } from 'cdbreact';
export 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" /> <Box style={{ width: '100%', flexWrap: 'wrap' }}> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="checkbox" id="checkboxPrimary" checked color="primary" /> <span style={{ marginLeft: '5px' }}>Primary</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="radio" id="radioPrimary" color="primary" /> <span style={{ marginLeft: '5px' }}>Primary</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="checkbox" id="checkboxSecondary" checked color="secondary" /> <span style={{ marginLeft: '5px' }}>Secondary</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="radio" id="radioSecondary" color="secondary" /> <span style={{ marginLeft: '5px' }}>Secondary</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="checkbox" id="checkboxDanger" checked color="danger" /> <span style={{ marginLeft: '5px' }}>Danger</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="radio" id="radioDanger" color="danger" /> <span style={{ marginLeft: '5px' }}>Danger</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="checkbox" id="checkboxSuccess" checked color="success" /> <span style={{ marginLeft: '5px' }}>Success</span> </Box> </ContainerB> <ContainerB> <Box display="flex" alignItems="center" style={{ margin: '10px 0' }}> <CDBInput type="radio" id="radioSuccess" color="success" /> <span style={{ marginLeft: '5px' }}>Success</span> </Box> </ContainerB> </Box> </CDBContainer> );};export default Input;
Input Sizing
import React from 'react';import { CDBInput, CDBContainer } from 'cdbreact';
export 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
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
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
Name | Type | Default | Description | Example |
---|---|---|---|---|
className | String | Adds custom classes | <CDBInput className="myClass" ... /> | |
placeholder | String | Sets the placeholder for the Input | <CDBInput placeholder="Placeholder" ... /> | |
value | Number, Boolean or String | The value of the input element (use with the controlled input) | <CDBInput value="I am controlled" onChange={this.handleChange} ... /> | |
valueDefault | Number or String | The default value of the input (use with the uncontrolled input) | <CDBInput valueDefault="I am uncontrolled" ... /> | |
id | String | Required! Set the id of the input element | <CDBInput id="myId" ... /> | |
size | String | Changes size of the component; available lg and sm | <CDBInput size="lg" ... /> | |
type | String | text | The type of the input element | <CDBInput type="checkbox" ... /> |
icon | node | Adds font awesome icon | <CDBInput icon={<i className="fa fa-user"></i>} ... /> | |
disabled | Boolean | false | Disables Input component | <CDBInput disabled .../> |
background | Boolead | false | Enables Background of Input | <CDBInput background .../> |
color | String | dark | Defines Background and color of Input | <CDBInput color="primary" .../> |
focused | Boolean | false | Defines focused state of Input | <CDBInput focused .../> |
fontSize | Number | 14 | Defines defualt font size of Input | <CDBInput fontSize={14} .../> |
getValue | Function | Retrieves value of Input onchange | <CDBInput getValue={()=>()} .../> | |
inputClassName | String | Adds custom classes to input | <CDBInput iconClassName="myIconClass" ... /> | |
labelClassName | String | Adds custom classes to label | <CDBInput labelClassName="myLabelClass" ... /> | |
onBlur | Function | to be called when Input is blurred | <CDBInput onBlur={()=>()} .../> | |
onChanged | Function | to be called when Input value is changed | <CDBInput onChange={()=>()} .../> | |
onFocus | Function | to be called when Input is focused | <CDBInput onFocus={()=>()} .../> | |
onInput | Function | <CDBInput onInput={()=>()} .../> |
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast