Search...

Input

Contrast Angular Bootstrap Input

Contrast Angular Bootstrap Input is a special field which is used to receive data from the user. It is 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.

ts
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

HTML
html
<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

HTML
html
<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

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

Input with MD

Angular Bootstrap Input with MD

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

Placeholder

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

Angular Bootstrap Input Placeholder

HTML
html
<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

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

Textarea

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

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

Background

image info

HTML
html
<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.

NameTypeDefaultDescriptionExample
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

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