Fields for selecting one or multiple values from a set of options.

select

Single or multi-select dropdown.

{
  key: 'country',
  type: 'select',
  value: '',
  label: 'Country',
  required: true,
  options: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ],
  placeholder: 'Select country',
}

Core Properties:

  • options: Array of { value: T, label: string } objects (at field level, not in props)

Core Props:

  • placeholder: Placeholder text when no value selected

Adapter Props

Implement ValueFieldComponent<SelectField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { SelectField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { ValueFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-select', template: '<!-- your template -->' })
export default class MySelectComponent implements ValueFieldComponent<SelectField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<SelectField['props']>();
  readonly meta = input<FieldMeta>();
}

export const MySelectType: FieldTypeDefinition = {
  name: 'select',
  loadComponent: () => import('./select.component'),
  mapper: valueFieldMapper,
};

Example

radio

Single selection from multiple options.

{
  key: 'plan',
  type: 'radio',
  value: '',
  label: 'Subscription Plan',
  required: true,
  options: [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro - $10/month' },
    { value: 'enterprise', label: 'Enterprise - $50/month' },
  ],
}

Core Properties:

  • options: Array of { value: string, label: string } objects (at field level, not in props)

Adapter Props

Implement ValueFieldComponent<RadioField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { RadioField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { ValueFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-radio', template: '<!-- your template -->' })
export default class MyRadioComponent implements ValueFieldComponent<RadioField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<RadioField['props']>();
  readonly meta = input<FieldMeta>();
}

export const MyRadioType: FieldTypeDefinition = {
  name: 'radio',
  loadComponent: () => import('./radio.component'),
  mapper: valueFieldMapper,
};

Example

checkbox

Boolean toggle control.

{
  key: 'newsletter',
  type: 'checkbox',
  value: false,
  label: 'Subscribe to newsletter',
}

Adapter Props

Implement CheckedFieldComponent<CheckboxField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { CheckboxField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { checkboxFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { CheckedFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-checkbox', template: '<!-- your template -->' })
export default class MyCheckboxComponent implements CheckedFieldComponent<CheckboxField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<CheckboxField['props']>();
  readonly meta = input<FieldMeta>();
}

export const MyCheckboxType: FieldTypeDefinition = {
  name: 'checkbox',
  loadComponent: () => import('./checkbox.component'),
  mapper: checkboxFieldMapper,
};

Example

toggle

Boolean switch control. Similar to checkbox but with a switch UI.

{
  key: 'darkMode',
  type: 'toggle',
  label: 'Enable Dark Mode',
  value: false,
}

Adapter Props

Implement CheckedFieldComponent<ToggleField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { ToggleField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { checkboxFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { CheckedFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-toggle', template: '<!-- your template -->' })
export default class MyToggleComponent implements CheckedFieldComponent<ToggleField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<ToggleField['props']>();
  readonly meta = input<FieldMeta>();
}

export const MyToggleType: FieldTypeDefinition = {
  name: 'toggle',
  loadComponent: () => import('./toggle.component'),
  mapper: checkboxFieldMapper,
};

Example

multi-checkbox

Multiple selection from a list of checkboxes. Value is an array of selected values.

{
  key: 'interests',
  type: 'multi-checkbox',
  label: 'Interests',
  value: [],
  options: [
    { value: 'tech', label: 'Technology' },
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
  ],
}

Core Properties:

  • options: Array of { value: T, label: string } objects (at field level, not in props)

Adapter Props

Implement ValueFieldComponent<MultiCheckboxField>. See Building an Adapter for the full guide. 

import { Component, input } from '@angular/core';
import type { MultiCheckboxField, FieldMeta } from '@ng-forge/dynamic-forms/integration';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';
import type { ValueFieldComponent, FieldTypeDefinition } from '@ng-forge/dynamic-forms';

@Component({ selector: 'my-multi-checkbox', template: '<!-- your template -->' })
export default class MyMultiCheckboxComponent implements ValueFieldComponent<MultiCheckboxField> {
  readonly field = input.required();
  readonly key = input.required<string>();
  readonly props = input<MultiCheckboxField['props']>();
  readonly meta = input<FieldMeta>();
}

export const MyMultiCheckboxType: FieldTypeDefinition = {
  name: 'multi-checkbox',
  loadComponent: () => import('./multi-checkbox.component'),
  mapper: valueFieldMapper,
};

Example