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 { label: DynamicText, value: T, disabled?: boolean } objects (at field level, not in props). label accepts static strings, signals, or observables; disabled makes the option non-selectable
  • placeholder: Placeholder text when no value selected (at field level, not in props)

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with optionsFieldMapper. See Building an Adapter for the full guide. 

// my-select.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type SelectField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-select',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MySelectComponent {
  protected readonly ngf = injectNgForgeField<unknown>();
  readonly props = input<SelectField['props']>();
}

// my-select.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
import { optionsFieldMapper } from '@ng-forge/dynamic-forms/integration';

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

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 { label: DynamicText, value: string, disabled?: boolean } objects (at field level, not in props). label accepts static strings, signals, or observables; disabled makes the option non-selectable

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with optionsFieldMapper. See Building an Adapter for the full guide. 

// my-radio.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type RadioField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-radio',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyRadioComponent {
  protected readonly ngf = injectNgForgeField<unknown>();
  readonly props = input<RadioField['props']>();
}

// my-radio.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
import { optionsFieldMapper } from '@ng-forge/dynamic-forms/integration';

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

checkbox

Boolean toggle control.

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

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with checkboxFieldMapper. See Building an Adapter for the full guide. 

// my-checkbox.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type CheckboxField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-checkbox',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyCheckboxComponent {
  protected readonly ngf = injectNgForgeField<boolean>();
  readonly props = input<CheckboxField['props']>();
}

// my-checkbox.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
import { checkboxFieldMapper } from '@ng-forge/dynamic-forms/integration';

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

toggle

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

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

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with checkboxFieldMapper. See Building an Adapter for the full guide. 

// my-toggle.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type ToggleField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-toggle',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyToggleComponent {
  protected readonly ngf = injectNgForgeField<boolean>();
  readonly props = input<ToggleField['props']>();
}

// my-toggle.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
import { checkboxFieldMapper } from '@ng-forge/dynamic-forms/integration';

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

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 { label: DynamicText, value: T, disabled?: boolean } objects (at field level, not in props). label accepts static strings, signals, or observables; disabled makes the option non-selectable

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with optionsFieldMapper. See Building an Adapter for the full guide. 

// my-multi-checkbox.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type MultiCheckboxField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-multi-checkbox',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyMultiCheckboxComponent {
  protected readonly ngf = injectNgForgeField<unknown[]>();
  readonly props = input<MultiCheckboxField['props']>();
}

// my-multi-checkbox.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
import { optionsFieldMapper } from '@ng-forge/dynamic-forms/integration';

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