From 0a6adae3daf771ebdc901e80d24756379c1f4b81 Mon Sep 17 00:00:00 2001
From: Van Nguyen <nguyenthanhvan1902@gmail.com>
Date: Wed, 21 Oct 2026 00:18:54 +0700
Subject: [PATCH] fix(angular): draw a built-in control for every field type

The README lists fourteen built-in types, but the Angular fallback drew only
seven; radio, range, file, date, time, datetime-local and switch rendered
"Unknown field type".

- radio: a radiogroup named by its caption (aria-labelledby), a label per
  button, emitting the option's own value; aria flags on every button
- range emits a number and starts at min; file emits the File, an array for
  multiple, null when cleared; date and time inputs emit the ISO text
- switch is a checkbox, as in the other adapters
- tests per type; README and MIGRATING say what changed
---
 .changeset/angular-builtin-types.md           |   5 +
 docs/MIGRATING.md                             |   4 +
 packages/angular/README.md                    |  14 +-
 .../angular/src/components/DynamicInput.ts    | 233 +++++++++++++++---
 packages/angular/test/builtInTypes.spec.ts    | 205 +++++++++++++++
 .../test/defaultRendererLabels.spec.ts        |  28 ++-
 6 files changed, 449 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/angular-builtin-types.md
 create mode 100644 packages/angular/test/builtInTypes.spec.ts

diff --git a/.changeset/angular-builtin-types.md b/.changeset/angular-builtin-types.md
new file mode 100644
index 0000000..be461f4
--- /dev/null
+++ b/.changeset/angular-builtin-types.md
@@ -0,0 +1,5 @@
+---
+'@dynamic-field-kit/angular': patch
+---
+
+The built-in fallback covers all fourteen field types the README lists, as in the React, Vue and Svelte adapters. `radio`, `range`, `file`, `date`, `time`, `datetime-local` and `switch` used to render "Unknown field type" when no renderer was registered. They now draw the same controls as the other adapters: a radio group (`role="radiogroup"`, named by its caption through `aria-labelledby`, a label per button, emitting the option's own value), a range that emits a number and starts at `min`, a file input that emits the `File` (an array for `multiple`, `null` when cleared), date and time inputs that emit the browser's ISO text, and a switch drawn as a checkbox. Each gets the label, `aria-invalid` and `aria-describedby` the other built-in controls have.
diff --git a/docs/MIGRATING.md b/docs/MIGRATING.md
index 996daac..4b7ebcf 100644
--- a/docs/MIGRATING.md
+++ b/docs/MIGRATING.md
@@ -35,6 +35,10 @@ there was no label at all, so the control had no accessible name. What moved:
   own CSS if your design shows the label elsewhere, but keep it in the page.
 - **Radio groups** have `role="radiogroup"` and `aria-labelledby` pointing at a
   `<span class="dfk-field-label">` caption (a group cannot take `<label for>`).
+- **Angular:** the built-in fallback covers all fourteen types, like the other
+  adapters: `radio`, `range`, `file`, `date`, `time`, `datetime-local` and
+  `switch` used to render "Unknown field type". Register a renderer for one of
+  them to keep your own.
 - **Angular:** a form store's errors now set `aria-describedby` on the control
   too; it used to follow only the errors of the field's own rules.
 
diff --git a/packages/angular/README.md b/packages/angular/README.md
index f85e2f4..2d9f772 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -263,8 +263,13 @@ For one field, set `id` on its `FieldDescription`; it wins over the prefix.
 `radio` · `range` · `file` · `date` · `time` · `datetime-local` · `switch`
 
 Any type you have not registered falls back to one of these. `file` emits a
-`File` (or `File[]` when `multiple` is set), `range` and `number` emit numbers,
-`checkbox` / `switch` emit booleans; everything else emits strings.
+`File` (or `File[]` when `multiple` is set, `null` when the choice is cleared),
+`range` and `number` emit numbers, `checkbox` / `switch` emit booleans, `radio`
+emits the chosen option's own `value`; everything else emits strings (`date`,
+`time` and `datetime-local` the ISO text the browser gives, such as
+`2026-10-21T09:30`). Before 1.12 only `text`, `password`, `email`, `number`,
+`textarea`, `checkbox` and `select` had a fallback here, and the other seven
+rendered "Unknown field type".
 
 Since 1.7.0 a default renderer also renders its validation message, as
 `<div id="{fieldId}-error" class="dfk-field-error" role="alert">`, which is what
@@ -276,7 +281,10 @@ it with `.dfk-field-error { display: none }` if you want the old silence.
 A built-in control is also labelled: when the field has a `label`,
 `<label id="{fieldId}-label" for="{fieldId}" class="dfk-field-label">` comes
 before it, and the `<dfk-dynamic-input>` element that holds the label, control
-and message gets the class `dfk-field`. A registered renderer is untouched.
+and message gets the class `dfk-field`. A radio group has `role="radiogroup"`
+and `aria-labelledby` pointing at a `<span class="dfk-field-label">` caption
+instead, with a `<label>` around each button. A registered renderer is
+untouched.
 
 ## DevTools
 
diff --git a/packages/angular/src/components/DynamicInput.ts b/packages/angular/src/components/DynamicInput.ts
index 967aa5f..92b7d66 100644
--- a/packages/angular/src/components/DynamicInput.ts
+++ b/packages/angular/src/components/DynamicInput.ts
@@ -58,20 +58,49 @@ const KNOWN_PROPS = [
   'multiple',
 ] as const;
 
+// A radio group is a `div` holding the buttons; every other built-in is one
+// form control.
 type BuiltInControl =
-  HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+  HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLDivElement;
 
-/** The types the built-in fallback draws a control for (see createBuiltIn). */
-const BUILT_IN_TYPES: ReadonlySet<string> = new Set([
+/** Types whose control is an `<input>` of the same `type`, holding text. */
+const TEXT_INPUT_TYPES: ReadonlySet<string> = new Set([
   'text',
   'password',
   'email',
   'number',
+  // The browser hands these over as ISO text: `2026-10-21`, `09:30`,
+  // `2026-10-21T09:30`. That text is the value, as in the other adapters.
+  'date',
+  'time',
+  'datetime-local',
+]);
+
+/**
+ * The types the built-in fallback draws a control for (see createBuiltIn):
+ * the same fourteen as the React, Vue and Svelte adapters.
+ */
+const BUILT_IN_TYPES: ReadonlySet<string> = new Set([
+  ...TEXT_INPUT_TYPES,
   'textarea',
   'checkbox',
+  'switch',
   'select',
+  'radio',
+  'range',
+  'file',
 ]);
 
+/** An option as the select and the radio group show it, read as every adapter reads it. */
+function readOption(option: unknown): { value: unknown; label: string } {
+  const record = option as Record<string, unknown>;
+  const value = record?.['value'] ?? record?.['id'] ?? option;
+  return {
+    value,
+    label: String(record?.['label'] ?? record?.['name'] ?? value),
+  };
+}
+
 @Component({
   selector: 'dfk-dynamic-input',
   standalone: true,
@@ -83,12 +112,21 @@ const BUILT_IN_TYPES: ReadonlySet<string> = new Set([
   host: { '[class.dfk-field]': 'isBuiltIn()' },
   // *ngIf rather than @if: the peer range starts at Angular 16, and the
   // built-in control flow block syntax is 17+.
+  //
+  // A radio group is not a labelable element: its caption is a plain element
+  // the group names itself after (`aria-labelledby`), as in the other
+  // adapters.
   template: `<label
-      *ngIf="showDefaultLabel()"
+      *ngIf="showDefaultLabel() && type !== 'radio'"
       [id]="labelNodeId()"
       [attr.for]="id"
       class="dfk-field-label"
       >{{ label }}</label
+    ><span
+      *ngIf="showDefaultLabel() && type === 'radio'"
+      [id]="labelNodeId()"
+      class="dfk-field-label"
+      >{{ label }}</span
     >
     <div #host style="display: contents;"></div>
     <div
@@ -121,6 +159,9 @@ export class DynamicInput
   private builtIn?: BuiltInControl;
   private builtInType?: string;
   private builtInOptions?: string;
+  // The values of the radio buttons, by position: what a button emits when
+  // chosen is the option's own value, not the text of its `value` attribute.
+  private radioValues: unknown[] = [];
   private subscriptions: Subscription[] = [];
   // Tracks which KNOWN_PROPS were actually supplied to DynamicInput (via
   // SimpleChanges), independent of TS class-field emit. See applyProps.
@@ -460,28 +501,38 @@ export class DynamicInput
    * change, so a flag that is no longer given is taken off again.
    */
   private applyFallbackAria(): void {
-    const control = (
-      this.host.element.nativeElement as HTMLElement
-    ).querySelector('input, select, textarea');
-    if (!control) {
-      return;
-    }
-    const flag = (name: string, value: string | undefined) => {
-      if (value === undefined) {
-        control.removeAttribute(name);
-      } else {
-        control.setAttribute(name, value);
+    const root = this.host.element.nativeElement as HTMLElement;
+    // Each button of a radio group carries the flags, as in the React and Vue
+    // adapters; any other built-in is a single control.
+    const group = this.builtIn instanceof HTMLDivElement;
+    const controls = group
+      ? Array.from(root.querySelectorAll('input[type="radio"]'))
+      : [root.querySelector('input, select, textarea')].filter(
+          (control): control is Element => control !== null,
+        );
+    for (const control of controls) {
+      const flag = (name: string, value: string | undefined) => {
+        if (value === undefined) {
+          control.removeAttribute(name);
+        } else {
+          control.setAttribute(name, value);
+        }
+      };
+      flag(
+        'aria-invalid',
+        this.ariaInvalid === undefined ? undefined : String(this.ariaInvalid),
+      );
+      // The group's `required` says it; a button is not required on its own.
+      if (!group) {
+        flag(
+          'aria-required',
+          this.ariaRequired === undefined
+            ? undefined
+            : String(this.ariaRequired),
+        );
       }
-    };
-    flag(
-      'aria-invalid',
-      this.ariaInvalid === undefined ? undefined : String(this.ariaInvalid),
-    );
-    flag(
-      'aria-required',
-      this.ariaRequired === undefined ? undefined : String(this.ariaRequired),
-    );
-    flag('aria-describedby', this.ariaDescribedBy || undefined);
+      flag('aria-describedby', this.ariaDescribedBy || undefined);
+    }
   }
 
   /**
@@ -502,12 +553,7 @@ export class DynamicInput
   }
 
   private createBuiltIn(type: string): BuiltInControl | null {
-    if (
-      type === 'text' ||
-      type === 'password' ||
-      type === 'email' ||
-      type === 'number'
-    ) {
+    if (TEXT_INPUT_TYPES.has(type)) {
       const input = document.createElement('input');
       input.type = type;
       input.addEventListener('input', () => {
@@ -527,7 +573,8 @@ export class DynamicInput
       return textarea;
     }
 
-    if (type === 'checkbox') {
+    // A switch is a checkbox, as in the other adapters.
+    if (type === 'checkbox' || type === 'switch') {
       const checkbox = document.createElement('input');
       checkbox.type = 'checkbox';
       checkbox.addEventListener('change', () => {
@@ -544,6 +591,43 @@ export class DynamicInput
       return select;
     }
 
+    if (type === 'range') {
+      const range = document.createElement('input');
+      range.type = 'range';
+      range.addEventListener('input', () => {
+        this.emitValue(Number(range.value));
+      });
+      return range;
+    }
+
+    if (type === 'file') {
+      const file = document.createElement('input');
+      file.type = 'file';
+      // The chosen file, or the list of them for `multiple`; `null` when the
+      // choice is cleared.
+      file.addEventListener('change', () => {
+        const files = file.files;
+        if (!files) {
+          return;
+        }
+        this.emitValue(this.multiple ? Array.from(files) : (files[0] ?? null));
+      });
+      return file;
+    }
+
+    if (type === 'radio') {
+      const group = document.createElement('div');
+      group.setAttribute('role', 'radiogroup');
+      group.addEventListener('change', (event) => {
+        const target = event.target as HTMLInputElement;
+        const index = Number(target.dataset['index']);
+        if (target.type === 'radio' && index in this.radioValues) {
+          this.emitValue(this.radioValues[index]);
+        }
+      });
+      return group;
+    }
+
     return null;
   }
 
@@ -557,6 +641,18 @@ export class DynamicInput
       }
     };
     attribute('id', this.id);
+
+    if (control instanceof HTMLDivElement) {
+      control.className = `dfk-radio-group ${this.className || ''}`;
+      // The caption drawn for a labelled field; see `showDefaultLabel`.
+      attribute(
+        'aria-labelledby',
+        this.label && this.id ? this.labelNodeId() : undefined,
+      );
+      this.syncRadioButtons(control);
+      return;
+    }
+
     attribute('class', this.className);
     control.required = Boolean(this.required);
 
@@ -574,6 +670,28 @@ export class DynamicInput
       return;
     }
 
+    if (control instanceof HTMLInputElement && control.type === 'range') {
+      // nor a range
+      control.disabled = Boolean(this.disabled || this.readOnly);
+      attribute('min', this.min?.toString());
+      attribute('max', this.max?.toString());
+      attribute('step', this.step?.toString());
+      // Bounds first: the browser clamps the value to them.
+      const next = String(this.value ?? this.min ?? 0);
+      if (control.value !== next) {
+        control.value = next;
+      }
+      return;
+    }
+
+    if (control instanceof HTMLInputElement && control.type === 'file') {
+      // A file input cannot be given a value, so `value` is not written.
+      control.disabled = Boolean(this.disabled || this.readOnly);
+      attribute('accept', this.accept);
+      control.multiple = Boolean(this.multiple);
+      return;
+    }
+
     attribute('placeholder', this.placeholder);
     control.disabled = Boolean(this.disabled);
     control.readOnly = Boolean(this.readOnly);
@@ -592,13 +710,56 @@ export class DynamicInput
     }
   }
 
+  /**
+   * The buttons of a built-in radio group, rebuilt only when the options
+   * changed, and the one that is checked. Markup as in the other adapters: a
+   * `<label>` per option around its button and its text.
+   */
+  private syncRadioButtons(group: HTMLDivElement): void {
+    const shown = (this.options || []).map(readOption);
+    const listed = JSON.stringify(
+      shown.map((option) => [String(option.value), option.label]),
+    );
+    if (listed !== this.builtInOptions) {
+      this.builtInOptions = listed;
+      this.radioValues = shown.map((option) => option.value);
+      while (group.firstChild) {
+        group.removeChild(group.firstChild);
+      }
+      shown.forEach((option, index) => {
+        const label = document.createElement('label');
+        label.style.marginRight = '12px';
+        label.style.display = 'inline-flex';
+        label.style.alignItems = 'center';
+        const button = document.createElement('input');
+        button.type = 'radio';
+        button.value = String(option.value);
+        button.dataset['index'] = String(index);
+        const text = document.createElement('span');
+        text.style.marginLeft = '4px';
+        text.textContent = option.label;
+        label.append(button, text);
+        group.appendChild(label);
+      });
+    }
+
+    const buttons = Array.from(
+      group.querySelectorAll<HTMLInputElement>('input[type="radio"]'),
+    );
+    buttons.forEach((button, index) => {
+      button.id = `${this.id || 'radio'}-${index}`;
+      button.name = this.id ?? '';
+      button.disabled = Boolean(this.disabled || this.readOnly);
+      button.required = Boolean(this.required);
+      button.checked = String(this.value) === String(this.radioValues[index]);
+    });
+  }
+
   /** The options of a built-in select, rebuilt only when the list changed, and the one that is chosen. */
   private syncBuiltInOptions(select: HTMLSelectElement): void {
     const options = (this.options || []).map((opt) => {
-      const optObj = opt as Record<string, any>;
-      const optVal = optObj['value'] ?? optObj['id'] ?? opt;
-      const optLabel = optObj['label'] ?? optObj['name'] ?? String(optVal);
-      return { value: String(optVal), label: String(optLabel) };
+      const option = readOption(opt);
+      return { value: String(option.value), label: option.label };
     });
     const listed = JSON.stringify(options);
     if (listed !== this.builtInOptions) {
diff --git a/packages/angular/test/builtInTypes.spec.ts b/packages/angular/test/builtInTypes.spec.ts
new file mode 100644
index 0000000..71a1e32
--- /dev/null
+++ b/packages/angular/test/builtInTypes.spec.ts
@@ -0,0 +1,205 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { DynamicInput } from '../src/components/DynamicInput';
+import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
+import { makeRegistry } from './helpers/renderers';
+
+// The fallback for the field types that had none before: the same controls,
+// values and markup as the React, Vue and Svelte built-ins.
+describe('the built-in fallback for every type the README lists', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DynamicInput],
+      providers: [{ provide: FIELD_REGISTRY, useValue: makeRegistry() }],
+    });
+  });
+
+  function mount(inputs: Record<string, unknown>) {
+    const fixture = TestBed.createComponent(DynamicInput);
+    const emitted: unknown[] = [];
+    fixture.componentInstance.onChange.subscribe((value: unknown) =>
+      emitted.push(value),
+    );
+    const set = (next: Record<string, unknown>) => {
+      for (const [key, value] of Object.entries(next)) {
+        fixture.componentRef.setInput(key, value);
+      }
+      fixture.detectChanges();
+    };
+    set(inputs);
+    const root = fixture.nativeElement as HTMLElement;
+    const one = <T extends Element>(selector: string) =>
+      root.querySelector(selector) as T;
+    const all = <T extends Element>(selector: string): T[] =>
+      Array.from(root.querySelectorAll(selector)) as T[];
+    return { fixture, root, set, one, all, emitted };
+  }
+
+  const type = (input: HTMLInputElement, value: string) => {
+    input.value = value;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  it.each([
+    ['date', '2026-10-21'],
+    ['time', '09:30'],
+    ['datetime-local', '2026-10-21T09:30'],
+  ])('draw a %s input whose value is the ISO text', (kind, iso) => {
+    const { one, set, emitted } = mount({ type: kind, id: 'f-when' });
+    const input = one<HTMLInputElement>('input');
+    expect(input.type).toBe(kind);
+    expect(input.id).toBe('f-when');
+    type(input, iso);
+    expect(emitted).toEqual([iso]);
+    set({ value: iso });
+    expect(input.value).toBe(iso);
+    expect(input.closest('.dfk-field')).not.toBeNull();
+  });
+
+  it('draw a switch as a checkbox that reports a boolean', () => {
+    const { one, set, emitted } = mount({ type: 'switch', value: true });
+    const input = one<HTMLInputElement>('input');
+    expect(input.type).toBe('checkbox');
+    expect(input.checked).toBe(true);
+    input.click();
+    expect(emitted).toEqual([false]);
+    set({ readOnly: true });
+    // a checkbox has no read-only state of its own
+    expect(input.disabled).toBe(true);
+  });
+
+  it('draw a range that reports a number, within its bounds', () => {
+    const { one, set, emitted } = mount({
+      type: 'range',
+      min: 1,
+      max: 10,
+      step: 1,
+    });
+    const input = one<HTMLInputElement>('input');
+    expect(input.type).toBe('range');
+    expect([input.min, input.max, input.step]).toEqual(['1', '10', '1']);
+    // no value yet: it starts at the minimum
+    expect(input.value).toBe('1');
+    type(input, '7');
+    expect(emitted).toEqual([7]);
+    set({ value: 4 });
+    expect(input.value).toBe('4');
+    set({ readOnly: true });
+    expect(input.disabled).toBe(true);
+  });
+
+  describe('a file input', () => {
+    function choose(input: HTMLInputElement, files: File[]) {
+      Object.defineProperty(input, 'files', {
+        configurable: true,
+        value: Object.assign([...files], {
+          item: (index: number) => files[index] ?? null,
+        }),
+      });
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    const a = new File(['a'], 'a.png', { type: 'image/png' });
+    const b = new File(['b'], 'b.png', { type: 'image/png' });
+
+    it('reports the chosen file, with accept passed on', () => {
+      const { one, emitted } = mount({ type: 'file', accept: 'image/*' });
+      const input = one<HTMLInputElement>('input');
+      expect(input.type).toBe('file');
+      expect(input.accept).toBe('image/*');
+      expect(input.multiple).toBe(false);
+      choose(input, [a]);
+      expect(emitted).toEqual([a]);
+    });
+
+    it('reports null when the choice is cleared', () => {
+      const { one, emitted } = mount({ type: 'file' });
+      choose(one<HTMLInputElement>('input'), []);
+      expect(emitted).toEqual([null]);
+    });
+
+    it('reports every file as an array for multiple', () => {
+      const { one, emitted } = mount({ type: 'file', multiple: true });
+      const input = one<HTMLInputElement>('input');
+      expect(input.multiple).toBe(true);
+      choose(input, [a, b]);
+      expect(emitted).toEqual([[a, b]]);
+    });
+  });
+
+  describe('a radio group', () => {
+    const options = [
+      { label: 'One', value: 1 },
+      { label: 'Two', value: 2 },
+    ];
+
+    it('is a radiogroup named after its caption, a label per button', () => {
+      const { root, one, all } = mount({
+        type: 'radio',
+        id: 'f-n',
+        label: 'Number',
+        options,
+      });
+      const group = one<HTMLDivElement>('[role="radiogroup"]');
+      expect(group.id).toBe('f-n');
+      expect(group.className).toContain('dfk-radio-group');
+      const caption = root.querySelector(
+        `[id="${group.getAttribute('aria-labelledby')}"]`,
+      );
+      expect(caption?.tagName).toBe('SPAN');
+      expect(caption?.textContent).toBe('Number');
+      // a group cannot take <label for>
+      expect(root.querySelector('label[for]')).toBeNull();
+      const buttons = all<HTMLInputElement>('input[type="radio"]');
+      expect(buttons.map((button) => button.id)).toEqual(['f-n-0', 'f-n-1']);
+      expect(buttons.map((button) => button.name)).toEqual(['f-n', 'f-n']);
+      expect(buttons.map((button) => button.labels?.[0]?.textContent)).toEqual([
+        'One',
+        'Two',
+      ]);
+    });
+
+    it('reports the value of the option itself and checks the one given', () => {
+      const { all, set, emitted } = mount({
+        type: 'radio',
+        id: 'f-n',
+        options,
+      });
+      const buttons = all<HTMLInputElement>('input[type="radio"]');
+      buttons[1]!.click();
+      // the number 2, not the text of the value attribute
+      expect(emitted).toEqual([2]);
+      set({ value: 1 });
+      expect(buttons.map((button) => button.checked)).toEqual([true, false]);
+    });
+
+    it('rebuilds the buttons only when the options change', () => {
+      const { all, set } = mount({ type: 'radio', id: 'f-n', options });
+      const first = all('input')[0];
+      set({ value: 2, options: [...options] });
+      expect(all('input')[0]).toBe(first);
+      set({ options: [...options, { label: 'Three', value: 3 }] });
+      expect(all('input')).toHaveLength(3);
+    });
+
+    it('puts the aria flags and the disabled state on every button', () => {
+      const { all, set } = mount({
+        type: 'radio',
+        id: 'f-n',
+        options,
+        ariaInvalid: true,
+        ariaDescribedBy: 'f-n-error',
+        required: true,
+      });
+      for (const button of all<HTMLInputElement>('input[type="radio"]')) {
+        expect(button.getAttribute('aria-invalid')).toBe('true');
+        expect(button.getAttribute('aria-describedby')).toBe('f-n-error');
+        expect(button.required).toBe(true);
+      }
+      set({ readOnly: true, ariaDescribedBy: undefined });
+      for (const button of all<HTMLInputElement>('input[type="radio"]')) {
+        expect(button.disabled).toBe(true);
+        expect(button.hasAttribute('aria-describedby')).toBe(false);
+      }
+    });
+  });
+});
diff --git a/packages/angular/test/defaultRendererLabels.spec.ts b/packages/angular/test/defaultRendererLabels.spec.ts
index fad7164..93131fa 100644
--- a/packages/angular/test/defaultRendererLabels.spec.ts
+++ b/packages/angular/test/defaultRendererLabels.spec.ts
@@ -27,7 +27,7 @@ class HostComponent {
   @Input() errors?: Record<string, string[]>;
 }
 
-// The types the Angular fallback draws a control for.
+// Every built-in type except radio, which is a group rather than one control.
 const builtIn = [
   'text',
   'password',
@@ -36,6 +36,12 @@ const builtIn = [
   'textarea',
   'checkbox',
   'select',
+  'range',
+  'file',
+  'date',
+  'time',
+  'datetime-local',
+  'switch',
 ];
 
 /** The control a label names, the way assistive technology finds it. */
@@ -88,6 +94,26 @@ describe('built-in controls', () => {
     expect(control.id).toBe('f-x');
   });
 
+  it('name a radio group after its caption', () => {
+    const root = mount(
+      list([
+        {
+          name: 'country',
+          type: 'radio',
+          label: 'Country',
+          options: [{ label: 'Vietnam', value: 'VN' }],
+        },
+      ]),
+    );
+    const group = root.querySelector('[role="radiogroup"]')!;
+    const caption = root.querySelector(
+      `[id="${group.getAttribute('aria-labelledby')}"]`,
+    );
+    expect(caption?.textContent).toBe('Country');
+    expect(group.id).toBe('f-country');
+    expect(group.closest('.dfk-field')).not.toBeNull();
+  });
+
   it('keep label, control and message together in one element', () => {
     const root = mount(
       list([{ name: 'email', type: 'email', label: 'Email' }]),