InputGroup

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

Basic input with appended text after

Default InputGroup example.

html

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

Basic input with appended text before

html

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

Run function on icon click

html

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

Small input group

html

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

Large input group

html

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

Input group with checkbox

html

<CDBInputGroup [prepend]=example.elementRef.nativeElement>
</CDBInputGroup>
<ng-template #example>
    <div class="input-group-text md-addon">
        <CDBInput type="checkbox"></CDBInput>
    </div>
</ng-template>

Basic input

html

<CDBInputGroup></CDBInputGroup>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast InputGroup Bootstrap Modules used

import {InputgroupModule } from 'cdbangular';

API Reference: Contrast InputGroup Inputs

The table below shows the possible input of the InputGroup component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
containerClass	String		Adds custom class to wrapper div	containerClass="wrapper"
containerId	String		Adds custom Id to wrapper div	containerId="id"
hint	String		Sets the placeholder for the Input	hint="placeholder"
id	String		Required! Set the id of the input element	id="myId"
input	node		Replaces default input for your custom elements	inputs={ <select className="browser-default custom-select"...> <option value="0" ...>Choose< .../option> <option value="1" ...>One< .../option> <... /select>} .../>
label	String or Boolean	div	Adds label for your input	group=true
labelClass	String	div	Adds custom class to the label	labelClass="labelCustomClass"
append	Node or String	null	Adds suffix for your input	append={ Send } append="@gmail.com"
appendClass	String		Adds custom class to Input Group append element	appendClass="font-italic"
prependClass	String		Adds custom class to Input Group prepend element	prependClass="font-italic"
size	String	lg	Changes size of the component; available `lg` and `sm`	size="lg"
type	String	text	The type of the input element	type="textarea"
validate	Boolean	false	Adds `.validate` class to the Input component	validate=true
value	Number, Boolean or String		The value of the input element (use with the controlled input)	value="I am controlled" onChange=this.handleChange
valueDefault	Number or String		The default value of the input (use with the uncontrolled input)	valueDefault="I am uncontrolled"
arialLabel	String		Adds custom aria-label text for input element	arialLabel="close"
material	Boolean	false	Changes component styles for material theme	material=true

Iframe

Footer