CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-primeng

Comprehensive Angular UI component library with 80+ components for building modern web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

form-controls.mddocs/

Form Controls

PrimeNG provides 21 form control components for data input and selection, all supporting Angular reactive forms and template-driven forms.

Text Input Components

InputText

Basic text input enhancement directive.

// Import
import { InputText } from 'primeng/inputtext';
// Module: InputTextModule

// Usage
@Component({
  template: `<input type="text" pInputText [(ngModel)]="value" />`
})

Textarea

Multi-line text input with auto-resize capability.

// Import
import { Textarea } from 'primeng/textarea';
// Module: TextareaModule

// Component Interface
interface TextareaProps {
  autoResize?: boolean;
  rows?: number;
  cols?: number;
}

// Usage
@Component({
  template: `
    <p-textarea 
      [(ngModel)]="description" 
      [autoResize]="true"
      rows="4"
      placeholder="Enter description">
    </p-textarea>
  `
})

InputMask

Formatted text input with masking.

// Import
import { InputMask } from 'primeng/inputmask';
// Module: InputMaskModule

// Component Interface
interface InputMaskProps {
  mask?: string;
  placeholder?: string;
  slotChar?: string;
  autoClear?: boolean;
  showClear?: boolean;
  readonly?: boolean;
  disabled?: boolean;
}

// Usage
@Component({
  template: `
    <p-inputmask 
      mask="(999) 999-9999"
      [(ngModel)]="phone"
      placeholder="(999) 999-9999">
    </p-inputmask>
  `
})

Password

Password input with strength meter and visibility toggle.

// Import
import { Password } from 'primeng/password';
// Module: PasswordModule

// Component Interface
interface PasswordProps {
  promptLabel?: string;
  weakLabel?: string;
  mediumLabel?: string;
  strongLabel?: string;
  feedback?: boolean;
  toggleMask?: boolean;
  showClear?: boolean;
}

// Usage
@Component({
  template: `
    <p-password 
      [(ngModel)]="password"
      [feedback]="true"
      [toggleMask]="true"
      promptLabel="Enter password"
      weakLabel="Too simple"
      mediumLabel="Average complexity"
      strongLabel="Complex password">
    </p-password>
  `
})

Numeric Input Components

InputNumber

Numeric input with formatting and locale support.

// Import
import { InputNumber } from 'primeng/inputnumber';
// Module: InputNumberModule

// Component Interface
interface InputNumberProps {
  format?: boolean;
  showButtons?: boolean;
  buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
  step?: number;
  min?: number;
  max?: number;
  minFractionDigits?: number;
  maxFractionDigits?: number;
  prefix?: string;
  suffix?: string;
  currency?: string;
  currencyDisplay?: string;
  locale?: string;
  mode?: 'decimal' | 'currency' | 'percent';
}

// Usage
@Component({
  template: `
    <p-inputnumber 
      [(ngModel)]="price"
      mode="currency"
      currency="USD"
      locale="en-US"
      [min]="0"
      [max]="1000000">
    </p-inputnumber>
  `
})

Knob

Circular dial input for numeric values.

// Import
import { Knob } from 'primeng/knob';
// Module: KnobModule

// Component Interface
interface KnobProps {
  min?: number;
  max?: number;
  step?: number;
  strokeWidth?: number;
  size?: number;
  valueColor?: string;
  rangeColor?: string;
  textColor?: string;
  valueTemplate?: string;
  readonly?: boolean;
  disabled?: boolean;
  showValue?: boolean;
}

// Usage
@Component({
  template: `
    <p-knob 
      [(ngModel)]="volume"
      [min]="0"
      [max]="100"
      [size]="150"
      valueTemplate="{value}%">
    </p-knob>
  `
})

Slider

Range slider for numeric value selection.

// Import
import { Slider } from 'primeng/slider';
// Module: SliderModule

// Component Interface
interface SliderProps {
  min?: number;
  max?: number;
  orientation?: 'horizontal' | 'vertical';
  step?: number;
  range?: boolean;
  animate?: boolean;
  disabled?: boolean;
  readonly?: boolean;
}

// Events
interface SliderChangeEvent {
  event: Event;
  value: number | number[];
}

// Usage
@Component({
  template: `
    <p-slider 
      [(ngModel)]="rangeValues"
      [range]="true"
      [min]="0"
      [max]="100"
      (onChange)="handleSliderChange($event)">
    </p-slider>
  `
})

Selection Components

Select (Dropdown)

Single selection dropdown with search and custom templates.

// Import
import { Select } from 'primeng/select';
// Module: SelectModule

// Component Interface
interface SelectProps {
  options?: SelectItem[];
  optionLabel?: string;
  optionValue?: string;
  optionDisabled?: string;
  optionGroupLabel?: string;
  optionGroupChildren?: string;
  filter?: boolean;
  filterBy?: string;
  filterPlaceholder?: string;
  filterLocale?: string;
  filterMatchMode?: string;
  scrollHeight?: string;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  editable?: boolean;
  showClear?: boolean;
  loading?: boolean;
  loadingIcon?: string;
}

// Events
interface SelectChangeEvent {
  originalEvent: Event;
  value: any;
}

// Usage
@Component({
  template: `
    <p-select 
      [options]="cities"
      [(ngModel)]="selectedCity"
      optionLabel="name"
      optionValue="code"
      [filter]="true"
      filterBy="name"
      placeholder="Select a City"
      [showClear]="true"
      (onChange)="onCitySelect($event)">
    </p-select>
  `
})

MultiSelect

Multi-selection dropdown with chips display.

// Import
import { MultiSelect } from 'primeng/multiselect';
// Module: MultiSelectModule

// Component Interface
interface MultiSelectProps {
  options?: SelectItem[];
  optionLabel?: string;
  optionValue?: string;
  optionDisabled?: string;
  optionGroupLabel?: string;
  optionGroupChildren?: string;
  display?: 'comma' | 'chip';
  selectedItemsLabel?: string;
  maxSelectedLabels?: number;
  selectionLimit?: number;
  showToggleAll?: boolean;
  filter?: boolean;
  filterBy?: string;
  filterPlaceholder?: string;
  scrollHeight?: string;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
}

// Usage
@Component({
  template: `
    <p-multiselect 
      [options]="countries"
      [(ngModel)]="selectedCountries"
      optionLabel="name"
      display="chip"
      placeholder="Choose Countries"
      [filter]="true"
      [showToggleAll]="true"
      [maxSelectedLabels]="3">
    </p-multiselect>
  `
})

Listbox

Multi-selection list component.

// Import
import { Listbox } from 'primeng/listbox';
// Module: ListboxModule

// Component Interface
interface ListboxProps {
  options?: SelectItem[];
  optionLabel?: string;
  optionValue?: string;
  optionDisabled?: string;
  optionGroupLabel?: string;
  optionGroupChildren?: string;
  multiple?: boolean;
  filter?: boolean;
  filterBy?: string;
  filterPlaceholder?: string;
  filterLocale?: string;
  filterMatchMode?: string;
  scrollHeight?: string;
  disabled?: boolean;
  readonly?: boolean;
  checkbox?: boolean;
}

// Usage
@Component({
  template: `
    <p-listbox 
      [options]="cities"
      [(ngModel)]="selectedCities"
      optionLabel="name"
      [multiple]="true"
      [checkbox]="true"
      [filter]="true"
      scrollHeight="250px">
    </p-listbox>
  `
})

AutoComplete

Searchable input with suggestions.

// Import
import { AutoComplete } from 'primeng/autocomplete';
// Module: AutoCompleteModule

// Component Interface
interface AutoCompleteProps {
  suggestions?: any[];
  field?: string;
  scrollHeight?: string;
  dropdown?: boolean;
  multiple?: boolean;
  minLength?: number;
  delay?: number;
  completeOnFocus?: boolean;
  autoHighlight?: boolean;
  forceSelection?: boolean;
  type?: string;
  disabled?: boolean;
  readonly?: boolean;
  placeholder?: string;
}

// Events
interface AutoCompleteCompleteEvent {
  originalEvent: Event;
  query: string;
}

interface AutoCompleteSelectEvent {
  originalEvent: Event;
  value: any;
}

// Usage
@Component({
  template: `
    <p-autocomplete 
      [(ngModel)]="selectedCountry"
      [suggestions]="filteredCountries"
      (completeMethod)="filterCountry($event)"
      field="name"
      [dropdown]="true"
      placeholder="Search countries"
      (onSelect)="onCountrySelect($event)">
    </p-autocomplete>
  `
})

Boolean Input Components

Checkbox

Boolean input control with tri-state support.

// Import
import { Checkbox } from 'primeng/checkbox';
// Module: CheckboxModule

// Component Interface
interface CheckboxProps {
  binary?: boolean;
  label?: string;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  trueValue?: any;
  falseValue?: any;
}

// Events
interface CheckboxChangeEvent {
  originalEvent: Event;
  checked: boolean;
}

// Usage
@Component({
  template: `
    <p-checkbox 
      [(ngModel)]="accepted"
      [binary]="true"
      label="Accept terms"
      (onChange)="onAcceptChange($event)">
    </p-checkbox>
  `
})

RadioButton

Single selection radio input.

// Import
import { RadioButton } from 'primeng/radiobutton';
// Module: RadioButtonModule

// Component Interface
interface RadioButtonProps {
  value?: any;
  name?: string;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  label?: string;
}

// Usage
@Component({
  template: `
    <div class="flex flex-wrap gap-3">
      <div class="flex align-items-center">
        <p-radiobutton 
          name="category" 
          value="A" 
          [(ngModel)]="selectedCategory" />
        <label class="ml-2">Category A</label>
      </div>
      <div class="flex align-items-center">
        <p-radiobutton 
          name="category" 
          value="B" 
          [(ngModel)]="selectedCategory" />
        <label class="ml-2">Category B</label>
      </div>
    </div>
  `
})

ToggleButton

On/off toggle button.

// Import
import { ToggleButton } from 'primeng/togglebutton';
// Module: ToggleButtonModule

// Component Interface
interface ToggleButtonProps {
  onLabel?: string;
  offLabel?: string;
  onIcon?: string;
  offIcon?: string;
  disabled?: boolean;
  readonly?: boolean;
}

// Usage
@Component({
  template: `
    <p-togglebutton 
      [(ngModel)]="checked"
      onLabel="On"
      offLabel="Off"
      onIcon="pi pi-check"
      offIcon="pi pi-times">
    </p-togglebutton>
  `
})

ToggleSwitch

Switch-style toggle control.

// Import
import { ToggleSwitch } from 'primeng/toggleswitch';
// Module: ToggleSwitchModule

// Component Interface
interface ToggleSwitchProps {
  disabled?: boolean;
  readonly?: boolean;
  trueValue?: any;
  falseValue?: any;
}

// Usage
@Component({
  template: `
    <p-toggleswitch 
      [(ngModel)]="switchValue"
      [trueValue]="'yes'"
      [falseValue]="'no'">
    </p-toggleswitch>
  `
})

Specialized Selection Components

TreeSelect

Hierarchical selection with tree structure.

// Import
import { TreeSelect } from 'primeng/treeselect';
// Module: TreeSelectModule

// Component Interface
interface TreeSelectProps {
  options?: TreeNode[];
  placeholder?: string;
  disabled?: boolean;
  selectionMode?: 'single' | 'multiple' | 'checkbox';
  display?: 'comma' | 'chip';
  filter?: boolean;
  filterBy?: string;
  filterMode?: string;
  filterPlaceholder?: string;
  scrollHeight?: string;
  resetFilterOnHide?: boolean;
  showClear?: boolean;
}

// Usage
@Component({
  template: `
    <p-treeselect 
      [(ngModel)]="selectedNodes"
      [options]="nodes"
      selectionMode="multiple"
      display="chip"
      placeholder="Select Items"
      [filter]="true"
      filterBy="label">
    </p-treeselect>
  `
})

SelectButton

Toggle button group for selection.

// Import
import { SelectButton } from 'primeng/selectbutton';
// Module: SelectButtonModule

// Component Interface
interface SelectButtonProps {
  options?: SelectItem[];
  optionLabel?: string;
  optionValue?: string;
  optionDisabled?: string;
  multiple?: boolean;
  disabled?: boolean;
  allowEmpty?: boolean;
}

// Usage
@Component({
  template: `
    <p-selectbutton 
      [options]="stateOptions"
      [(ngModel)]="value"
      optionLabel="label"
      optionValue="value">
    </p-selectbutton>
  `
})

Date and Time Components

DatePicker

Calendar component for date/time selection.

// Import
import { DatePicker } from 'primeng/datepicker';
// Module: DatePickerModule

// Component Interface
interface DatePickerProps {
  selectionMode?: 'single' | 'multiple' | 'range';
  dateFormat?: string;
  inline?: boolean;
  showOtherMonths?: boolean;
  selectOtherMonths?: boolean;
  showIcon?: boolean;
  iconDisplay?: 'input' | 'button';
  icon?: string;
  numberOfMonths?: number;
  view?: 'date' | 'month' | 'year';
  touchUI?: boolean;
  showTime?: boolean;
  timeOnly?: boolean;
  showSeconds?: boolean;
  showMillisec?: boolean;
  hourFormat?: '12' | '24';
  stepHour?: number;
  stepMinute?: number;
  stepSecond?: number;
  showButtonBar?: boolean;
  todayButtonStyleClass?: string;
  clearButtonStyleClass?: string;
  minDate?: Date;
  maxDate?: Date;
  disabledDates?: Date[];
  disabledDays?: number[];
  yearRange?: string;
  showWeek?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  placeholder?: string;
}

// Events
interface DatePickerSelectEvent {
  originalEvent: Event;
  value: Date | Date[];
}

// Usage
@Component({
  template: `
    <p-datepicker 
      [(ngModel)]="date"
      [showIcon]="true"
      [showButtonBar]="true"
      dateFormat="mm/dd/yy"
      placeholder="Select date"
      (onSelect)="onDateSelect($event)">
    </p-datepicker>
  `
})

Other Input Components

ColorPicker

Color selection widget.

// Import
import { ColorPicker } from 'primeng/colorpicker';
// Module: ColorPickerModule

// Component Interface
interface ColorPickerProps {
  format?: 'hex' | 'rgb' | 'hsb';
  inline?: boolean;
  disabled?: boolean;
  readonly?: boolean;
}

// Usage
@Component({
  template: `
    <p-colorpicker 
      [(ngModel)]="color"
      format="hex"
      [inline]="false">
    </p-colorpicker>
  `
})

Rating

Star rating input component.

// Import
import { Rating } from 'primeng/rating';
// Module: RatingModule

// Component Interface
interface RatingProps {
  stars?: number;
  cancel?: boolean;
  disabled?: boolean;
  readonly?: boolean;
}

// Events
interface RatingRateEvent {
  originalEvent: Event;
  value: number;
}

// Usage
@Component({
  template: `
    <p-rating 
      [(ngModel)]="rating"
      [stars]="5"
      [cancel]="true"
      (onRate)="onRatingChange($event)">
    </p-rating>
  `
})

InputOtp

One-time password input component.

// Import
import { InputOtp } from 'primeng/inputotp';
// Module: InputOtpModule

// Component Interface
interface InputOtpProps {
  length?: number;
  mask?: boolean;
  integerOnly?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  variant?: 'filled' | 'outlined';
}

// Usage
@Component({
  template: `
    <p-inputotp 
      [(ngModel)]="otpValue"
      [length]="6"
      [mask]="true"
      [integerOnly]="true">
    </p-inputotp>
  `
})

Form Integration

All PrimeNG form components support both reactive forms and template-driven forms:

// Reactive Forms
export class ReactiveFormComponent {
  form = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    country: [null, Validators.required],
    cities: [[]],
    birthDate: [null],
    rating: [0]
  });

  constructor(private fb: FormBuilder) {}
}

// Template
@Component({
  template: `
    <form [formGroup]="form">
      <input pInputText formControlName="name" />
      <input pInputText formControlName="email" />
      <p-select [options]="countries" formControlName="country" />
      <p-multiselect [options]="cities" formControlName="cities" />
      <p-datepicker formControlName="birthDate" />
      <p-rating formControlName="rating" />
    </form>
  `
})

Install with Tessl CLI

npx tessl i tessl/npm-primeng

docs

data-display.md

form-controls.md

index.md

layout.md

navigation.md

overlay.md

services.md

tile.json