Windframe Import update is finally here!


Contrast Angular Bootstrap InputGroup

Contrast Angular Bootstrap Input group component is used for collecting data entered by users. It usually contains buttons, text areas and other inputs. With this component, your forms are attractive and easy to customize.

Importing the Contrast Angular Bootstrap InputGroup Module

To use the Contrast Angular Bootstrap Footer component in your project you need to import InputGroupModule.

import { InputgroupModule } from 'cdbangular';

Prepends and Appends

Contrast Angular Bootstrap Input group component provides two ways for adding prepends and appends to the component. The prepend and append properties of the component may be used to insert text add-ons to the component, while for adding other HTML elements such as radios, checkboxes and suchlike, the HTML elements can be added as children within the InputGroup component. The elements must be given a slot property which can only be assigned to the values cdbInputPrepend and cdbInputAppend, and a class of input-group-text & md-addon as demonstrated in the InputGroup with checkbox section.

Basic input with appended text after

This is the default InputGroup.

Angular Bootstrap InputGroup

<CDBInputGroup hint="Recipient's username" inputGroupClass="mb-3 mt-0" append="@example.com">

Basic input with appended text before

Angular Bootstrap InputGroup

<CDBInputGroup inputGroupClass="flex-nowrap mb-3" prepend="@" hint="Username"></CDBInputGroup>

Run function on icon click

Angular Bootstrap InputGroup

<CDBInputGroup icon="bell" onIconClick="" append="Bells"></CDBInputGroup>

Small input group

Angular Bootstrap InputGroup

<CDBInputGroup inputGroupClass="mb-2 mt-0" prepend="Small" size="sm"></CDBInputGroup>

Large input group

Angular Bootstrap InputGroup

<CDBInputGroup inputGroupClass="mb-2 mt-0" prepend="Large" size="lg"></CDBInputGroup>

Input group with checkbox

Angular Bootstrap InputGroup

<div slot="cdbInputPrepend" class="input-group-text md-addon">
<input type="checkbox" />

API Reference: Contrast Angular Bootstrap InputGroup Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap InputGroup 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 CDBInputGroup component.

classStringAdds custom classesclass="myClass"
containerClassStringAdds custom class to wrapper divcontainerClass="wrapper"
containerIdStringAdds custom Id to wrapper divcontainerId="id"
hintStringSets the placeholder for the Inputhint="placeholder"
idStringRequired! Set the id of the input elementid="myId"
inputnodeReplaces default input for your custom elementsinputs={ <select className="browser-default custom-select"...> <option value="0" ...>Choose< .../option> <option value="1" ...>One< .../option> <... /select>} .../>
labelString or BooleandivAdds label for your inputgroup=true
labelClassStringdivAdds custom class to the labellabelClass="labelCustomClass"
appendNode or StringnullAdds suffix for your inputappend={
} append="@gmail.com"
appendClassStringAdds custom class to Input Group append elementappendClass="font-italic"
prependClassStringAdds custom class to Input Group prepend elementprependClass="font-italic"
sizeStringlgChanges size of the component; available lg and smsize="lg"
typeStringtextThe type of the input elementtype="textarea"
validateBooleanfalseAdds .validate class to the Input componentvalidate=true
valueNumber, Boolean or StringThe value of the input element (use with the controlled input)value="I am controlled" onChange=this.handleChange
valueDefaultNumber or StringThe default value of the input (use with the uncontrolled input)valueDefault="I am uncontrolled"
arialLabelStringAdds custom aria-label text for input elementarialLabel="close"
materialBooleanfalseChanges component styles for material themematerial=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.