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

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';
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 { value: string, label: string } objects (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-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';
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';
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';
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 { value: T, label: string } objects (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-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';
import { optionsFieldMapper } from '@ng-forge/dynamic-forms/integration';

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