Windframe Import Update is finally here.


Angular Bootstrap Input

Angular Bootstrap Input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms. You can use material design version or default bootstrap style.

Importing the Contrast Angular Bootstrap Input Module

To use the Contrast Angular Bootstrap Input component in your project you need to import InputModule.

import {InputModule } from 'cdbangular';

Default Input

The CDBInput allows for a variety of props to be passed into it to personalize the input field.

The label property is used to tell you user what kind of data to input in that field.

The type property describes what type of data we want to collect in the input field, ranging from text, emails, to passwords and checkboxes etc.

The [background] property takes in a boolean that if set to true gives our input a background.

Angular Bootstrap Input Default

<CDBInput id="username" label="Username"></CDBInput>
<CDBInput hint="Your e-mail" type="email"></CDBInput>
<CDBInput type="number"></CDBInput>
<CDBInput [material]=true type="text"></CDBInput>
<CDBInput [background]=true type="text"></CDBInput>
<CDBInput type="checkbox"></CDBInput>
<CDBInput class="mt-5" type="textarea"></CDBInput>

Input Sizing

Use the size prop to define how little or large you want your input field to be.

Angular Bootstrap Input Size

<CDBInput label="Your e-mail" type="email" size="sm"></CDBInput>
<CDBInput type="number" label="Your Number" size="lg"></CDBInput>

Input with icons

Use the icon property to nest icons in your input.

Angular Bootstrap Input with Icons

<CDBInput label="Username" type="text" icon="user"></CDBInput>
<CDBInput label="Password" type="password" icon="bell"></CDBInput>

Input with MD

Angular Bootstrap Input with MD

<CDBInput [material]=true label="Your e-mail" type="email"></CDBInput>
<CDBInput [material]=true type="number" label="Your Number"></CDBInput>


Use the hint property to give your input fields a placeholder.

Angular Bootstrap Input Placeholder

<CDBInput hint="Your e-mail" type="email"></CDBInput>
<CDBInput type="number" hint="Your Number"></CDBInput>

Disabled Inputs

Set your [disabled] property to true to disable your input fields.

Angular Bootstrap Input Disabled

<CDBInput hint="Your e-mail" type="email" [disabled]=true></CDBInput>
<CDBInput type="number" hint="Your Number" [disabled]=true></CDBInput>


Give the type property a value of textarea to give your input field a large area to work with usually for essays.

Angular Bootstrap Input TextArea

<CDBInput label="Your name" type="textarea"></CDBInput>
<CDBInput label="Your story" type="textarea" [material]=true rows=20 cols=30></CDBInput>


image info

<CDBInput hint="Your e-mail" type="email" [background]=true></CDBInput>
<CDBInput type="number" hint="Your Number" [background]=true></CDBInput>

API Reference: Contrast Angular Bootstrap Input Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Input component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBInput component.

classStringAdds custom classesclass="myClass"
containerClassStringAdds custom class to wrapping divcontainerClass="wrapper"
errorStringSets the error message for the labels data-error attributeerror="Ouch!"
hintStringSets the placeholder for the Inputhint="Placeholder"
valueNumber, Boolean or StringThe value of the input element (use with the controlled input)value="I am controlled" onChange={this.handleChange}
materialBooleanfalseChanges component styles for material themematerial=true
valueDefaultNumber or StringThe default value of the input (use with the uncontrolled input)valueDefault="I am uncontrolled"
idStringRequired! Set the id of the input elementid="myId"
labelStringAdd label to the component; you can attach jsx elements (f.e. links)label="My custom input"
labelClassStringAdd custom class to labellabelClass="My custom label class"
labelIdStringSets custom id to labellabelId="myId"
sizeStringlgChanges size of the component; available lg and smsize="lg"
successStringSets the success message for the labels data-success attributesuccess="Great!"
typeStringtextThe type of the input elementtype="checkbox"
inputRefObject or functionAllows to attach Angular Ref to the input component; accepts only Callback RefinputRef={ref => this.myRef = ref }
iconStringAdds font awesome iconicon="caret-right"
iconBrandStringUse this property to set brand icon (fab)icon="twitter" iconBrand=true
iconLightStringUse this property to set light icon (fal)icon="twitter" iconLight=true
iconRegularStringUse this property to set regular icon (far)icon="twitter" iconRegular=true
iconClassStringAdds custom classes to icon elementicon="caret-right" iconClass="my-class"
disableBooleanfalseDisables Input componentdisabled=true
groupBooleanfalseAdd .form-group class to the wrapping diverror=true
filledBooleanfalseAdd filled-in style to checkbox/radio buttontype="checkbox" filled=true
validateBooleanfalseAdds .validate class to the Input componentvalidate=true
gapBooleanfalseCreates gap inside checkbox/radio buttontype="checkbox" gap=true

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