psp_panel/src/app/demo/components/uikit/input/inputdemo.component.html

<div class="grid p-fluid">
	<div class="col-12 md:col-6">
		<div class="card">
			<h5>InputText</h5>
			<div class="grid formgrid">
				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
					<input type="text" pInputText placeholder="Default">
				</div>
				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
					<input type="text" pInputText placeholder="Disabled" [disabled]="true"/>
				</div>
				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
					<input type="text" pInputText placeholder="Invalid" class="ng-dirty ng-invalid"/>
				</div>
			</div>

			<h5>Icons</h5>
			<div class="grid formgrid">
				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
					<span class="p-input-icon-left">
						<i class="pi pi-user"></i>
						<input type="text" pInputText placeholder="Username"/>
					</span>
				</div>
				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
					<span class="p-input-icon-right">
						<input type="text" pInputText placeholder="Search"/>
						<i class="pi pi-search"></i>
					</span>
				</div>
				<div class="col-12 mb-2 lg:col-4 lg:mb-0">
					<span class="p-input-icon-left p-input-icon-right">
						<i class="pi pi-user"></i>
						<input type="text" pInputText placeholder="Search"/>
						<i class="pi pi-search"></i>
					</span>
				</div>
			</div>

			<h5>Float Label</h5>
			<span class="p-float-label">
				<input id="float-input" type="text" pInputText>
				<label for="float-input">Username</label>
			</span>

			<h5>Textarea</h5>
			<textarea rows="5" cols="30" placeholder="Your Message" pInputTextarea></textarea>

			<h5>AutoComplete</h5>
			<p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
			</p-autoComplete>

			<h5>Calendar</h5>
			<p-calendar [showIcon]="true" inputId="icon"></p-calendar>

			<h5>InputNumber</h5>
			<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
			</p-inputNumber>

			<h5>Chips</h5>
			<p-chips></p-chips>
		</div>

		<div class="card">
            <div class="grid">
                <div class="col-12">
                    <h5>Slider</h5>
                    <input type="text" pInputText [(ngModel)]="valSlider" readonly/>
                    <p-slider [(ngModel)]="valSlider"></p-slider>
                </div>
                <div class="col-12 md:col-6">
                    <h5>Rating</h5>
                    <p-rating></p-rating>
                </div>
                <div class="col-12 md:col-6">
                    <h5>ColorPicker</h5>
                    <p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
                </div>
                <div class="col-12">
                    <h5>Knob</h5>
                    <p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50" [max]="50"></p-knob>
                </div>
            </div>
		</div>
	</div>

	<div class="col-12 md:col-6">
		<div class="card">
			<h5>RadioButton</h5>
			<div class="grid formgrid">
				<div class="col-12 md:col-4">
					<div class="field-radiobutton">
						<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
						<label for="city1">Chicago</label>
					</div>
				</div>
				<div class="col-12 md:col-4">
					<div class="field-radiobutton">
						<p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
									   id="city2"></p-radioButton>
						<label for="city2">Los Angeles</label>
					</div>
				</div>
				<div class="col-12 md:col-4">
					<div class="field-radiobutton">
						<p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
						<label for="city3">New York</label>
					</div>
				</div>
			</div>

			<h5>Checkbox</h5>
			<div class="grid formgrid">
				<div class="col-12 md:col-4">
					<div class="field-checkbox">
						<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
						<label for="ny">New York</label>
					</div>
				</div>
				<div class="col-12 md:col-4">
					<div class="field-checkbox">
						<p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
						<label for="sf">San Francisco</label>
					</div>
				</div>
				<div class="col-12 md:col-4">
					<div class="field-checkbox">
						<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
						<label for="la">Los Angeles</label>
					</div>
				</div>
			</div>

			<h5>Input Switch</h5>
			<p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
		</div>

		<div class="card">
			<h5>Listbox</h5>
			<p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>

			<h5>Dropdown</h5>
			<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>

			<h5>Multiselect</h5>
			<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" placeholder="Select a Country" optionLabel="name" class="multiselect-custom" display="chip">
				<ng-template let-country pTemplate="item">
					<div class="flex align-items-center">
						<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width:21px"/>
						<span class="ml-2">{{country.name}}</span>
					</div>
				</ng-template>
			</p-multiSelect>
		</div>

		<div class="card">
			<h5>ToggleButton</h5>
			<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{'width': '10em'}"></p-toggleButton>

			<h5>SelectOneButton</h5>
			<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>

			<h5>SelectManyButton</h5>
			<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" [multiple]="true" optionLabel="name"></p-selectButton>
		</div>
	</div>
	
	<div class="col-12">
		<div class="card">
			<h5>InputGroup</h5>
			<div class="grid">
				<div class="col-12 md:col-6">
                    <p-inputGroup>
                        <p-inputGroupAddon>
                            <i class="pi pi-user"></i>
                        </p-inputGroupAddon>
                        <input pInputText type="text" placeholder="Username" />
                    </p-inputGroup>
                </div>
				<div class="col-12 md:col-6">
                    <p-inputGroup class="w-full">
                        <p-inputGroupAddon>
                            <i class="pi pi-tags" style="line-height: 1.25"></i>
                        </p-inputGroupAddon>

                        <p-inputGroupAddon>
                            <i class="pi pi-shopping-cart" style="line-height: 1.25"></i>
                        </p-inputGroupAddon>

                        <input type="text" pInputText placeholder="Price" />
                        <p-inputGroupAddon>$</p-inputGroupAddon>
                        <p-inputGroupAddon>.00</p-inputGroupAddon>
                    </p-inputGroup>
                </div>
				<div class="col-12 md:col-6">
                    <p-inputGroup>
                        <button type="button" pButton label="Search"></button>
                        <input type="text" pInputText placeholder="Keyword" />
                    </p-inputGroup>
                </div>
				<div class="col-12 md:col-6">
                    <p-inputGroup>
                        <p-inputGroupAddon><p-checkbox [(ngModel)]="valCheck2"
                                [binary]="true"></p-checkbox></p-inputGroupAddon>
                        <input type="text" pInputText placeholder="Username" />
                    </p-inputGroup>
                </div>
			</div>
		</div>
	</div>
</div>