Radio buttons

This tutorial shows you how to build a custom radio button cell type using a renderer that displays radio inputs directly in cells, with ARIA semantics, roving tabindex, and keyboard navigation.

1
import { useRef } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import { rendererFactory } from 'handsontable/renderers';
5
import { BaseEditor } from 'handsontable/editors/baseEditor';
6
import { registerCellType } from 'handsontable/cellTypes';
7
import './example1.css';
8

9
registerAllModules();
10

11
class RadioEditor extends BaseEditor {
12
  init() {}
13
  open() {}
14
  close() {}
15
  focus() {}
16
  getValue() { return this.originalValue; }
17
  setValue(value) { this.originalValue = value; }
18
}
19

20
const radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {
21
  while (td.firstChild) td.removeChild(td.firstChild);
22

23
  const options = cellProperties.options || [];
24
  const wrapper = document.createElement('div');
25

26
  wrapper.className = 'htRadioCell';
27
  wrapper.setAttribute('role', 'radiogroup');
28

29
  const colHeader = instance.getColHeader(column);
30

31
  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));
32

33
  const isReadOnly = !!cellProperties.readOnly;
34

35
  const hasChecked = options.some((opt) => {
36
    const v = typeof opt === 'object' ? opt.value : opt;
37

38
    return String(v) === String(value);
39
  });
40

41
  const cycle = (direction) => {
42
    if (!options.length) return;
43
    const i = options.findIndex((opt) => {
44
      const v = typeof opt === 'object' ? opt.value : opt;
45

46
      return String(v) === String(value);
47
    });
48
    const last = options.length - 1;
49
    const next = direction === 'next'
50
      ? (i === last || i === -1 ? 0 : i + 1)
51
      : (i <= 0 ? last : i - 1);
52
    const newValue = typeof options[next] === 'object' ? options[next].value : options[next];
53

54
    instance.setDataAtCell(row, column, newValue);
55
    queueMicrotask(() => {
56
      const newTd = instance.getCell(row, column);
57

58
      newTd?.querySelector(`input[type="radio"][value="${CSS.escape(newValue)}"]`)?.focus();
59
    });
60
  };
61

62
  options.forEach((opt, idx) => {
63
    const optValue = typeof opt === 'object' ? opt.value : opt;
64
    const optLabel = typeof opt === 'object' ? opt.label : opt;
65
    const label = document.createElement('label');
66

67
    label.className = 'htUIRadio';
68

69
    const input = document.createElement('input');
70

71
    input.type = 'radio';
72
    input.className = 'htUIRadioInput';
73
    input.name = `radio-r${row}-c${column}`;
74
    input.value = optValue;
75
    input.checked = String(optValue) === String(value);
76
    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;
77
    input.disabled = isReadOnly;
78

79
    const span = document.createElement('span');
80

81
    span.className = 'htUIRadioLabel';
82
    span.textContent = optLabel;
83

84
    label.appendChild(input);
85
    label.appendChild(span);
86
    wrapper.appendChild(label);
87

88
    input.addEventListener('change', (e) => {
89
      e.stopPropagation();
90
      const v = e.target.value;
91

92
      instance.setDataAtCell(row, column, v);
93
      queueMicrotask(() => {
94
        const newTd = instance.getCell(row, column);
95

96
        newTd?.querySelector(`input[type="radio"][value="${CSS.escape(v)}"]`)?.focus();
97
      });
98
    });
99

100
    label.addEventListener('mousedown', (e) => e.stopPropagation());
101

102
    input.addEventListener('keydown', (e) => {
103
      if (e.key === 'Escape') {
104
        e.preventDefault();
105
        e.stopPropagation();
106
        instance.selectCell(row, column);
107

108
        return;
109
      }
110
      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
111
        e.preventDefault();
112
        e.stopPropagation();
113
        cycle('next');
114

115
        return;
116
      }
117
      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
118
        e.preventDefault();
119
        e.stopPropagation();
120
        cycle('prev');
121

122
        return;
123
      }
124
      e.stopPropagation();
125
    });
126
  });
127

128
  td.appendChild(wrapper);
129
  td.style.verticalAlign = 'top';
130
});
131

132
registerCellType('radio', { editor: RadioEditor, renderer: radioRenderer });
133

134
/* start:skip-in-preview */
135
const data = [
136
  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },
137
  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },
138
  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },
139
  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },
140
  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },
141
];
142
/* end:skip-in-preview */
143

144
const priorityOptions = [
145
  { value: 'low',    label: 'Low'    },
146
  { value: 'medium', label: 'Medium' },
147
  { value: 'high',   label: 'High'   },
148
];
149

150
const statusOptions = [
151
  { value: 'todo',        label: 'Todo'        },
152
  { value: 'in-progress', label: 'In progress' },
153
  { value: 'done',        label: 'Done'        },
154
];
155

156
const ExampleComponent = () => {
157
  const hotRef = useRef(null);
158

159
  const afterInit = function() {
160
    this.rootElement.addEventListener('keydown', (e) => {
161
      if (e.target.tagName === 'INPUT') return;
162
      if (e.key !== 'Enter' && e.key !== 'F2') return;
163

164
      const sel = this.getSelectedLast();
165

166
      if (!sel) return;
167

168
      const [r, c] = sel;
169

170
      if (this.getCellMeta(r, c).type !== 'radio') return;
171

172
      const td = this.getCell(r, c);
173
      const target = td?.querySelector('input[type="radio"]:checked')
174
        ?? td?.querySelector('input[type="radio"]');
175

176
      if (target) {
177
        e.stopImmediatePropagation();
178
        e.preventDefault();
179
        target.focus();
180
      }
181
    }, true);
182
  };
183

184
  return (
185
    <HotTable
186
      ref={hotRef}
187
      data={data}
188
      colHeaders={['Task', 'Priority', 'Status']}
189
      rowHeaders={true}
190
      height="auto"
191
      width="100%"
192
      rowHeights={96}
193
      afterInit={afterInit}
194
      licenseKey="non-commercial-and-evaluation"
195
    >
196
      <HotColumn data="task"     type="text"  width={300} />
197
      <HotColumn data="priority" type="radio" width={160} options={priorityOptions} />
198
      <HotColumn data="status"   type="radio" width={170} options={statusOptions}   />
199
    </HotTable>
200
  );
201
};
202

203
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import { rendererFactory } from 'handsontable/renderers';
5
import { BaseEditor } from 'handsontable/editors/baseEditor';
6
import { registerCellType } from 'handsontable/cellTypes';
7
import type { CellProperties } from 'handsontable/settings';
8
import type Handsontable from 'handsontable/base';
9
import './example1.css';
10

11
registerAllModules();
12

13
type RadioOption = { value: string; label: string } | string;
14

15
interface RadioCellProperties extends CellProperties {
16
  options: RadioOption[];
17
}
18

19
class RadioEditor extends BaseEditor {
20
  init(): void {}
21
  open(): void {}
22
  close(): void {}
23
  focus(): void {}
24
  getValue(): string { return this.originalValue as string; }
25
  setValue(value: string): void { this.originalValue = value; }
26
}
27

28
const radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {
29
  while (td.firstChild) td.removeChild(td.firstChild);
30

31
  const options: RadioOption[] = (cellProperties as RadioCellProperties).options || [];
32
  const wrapper = document.createElement('div');
33

34
  wrapper.className = 'htRadioCell';
35
  wrapper.setAttribute('role', 'radiogroup');
36

37
  const colHeader = instance.getColHeader(column as number);
38

39
  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));
40

41
  const isReadOnly = !!cellProperties.readOnly;
42

43
  const hasChecked = options.some((opt) => {
44
    const v = typeof opt === 'object' ? opt.value : opt;
45

46
    return String(v) === String(value);
47
  });
48

49
  const cycle = (direction: 'next' | 'prev') => {
50
    if (!options.length) return;
51
    const i = options.findIndex((opt) => {
52
      const v = typeof opt === 'object' ? opt.value : opt;
53

54
      return String(v) === String(value);
55
    });
56
    const last = options.length - 1;
57
    const next = direction === 'next'
58
      ? (i === last || i === -1 ? 0 : i + 1)
59
      : (i <= 0 ? last : i - 1);
60
    const newValue = typeof options[next] === 'object'
61
      ? (options[next] as { value: string }).value
62
      : (options[next] as string);
63

64
    instance.setDataAtCell(row as number, column as number, newValue);
65
    queueMicrotask(() => {
66
      const newTd = instance.getCell(row as number, column as number);
67

68
      newTd?.querySelector<HTMLInputElement>(`input[type="radio"][value="${CSS.escape(newValue)}"]`)?.focus();
69
    });
70
  };
71

72
  options.forEach((opt, idx) => {
73
    const optValue = typeof opt === 'object' ? opt.value : opt;
74
    const optLabel = typeof opt === 'object' ? opt.label : opt;
75
    const label = document.createElement('label');
76

77
    label.className = 'htUIRadio';
78

79
    const input = document.createElement('input');
80

81
    input.type = 'radio';
82
    input.className = 'htUIRadioInput';
83
    input.name = `radio-r${row}-c${column}`;
84
    input.value = optValue;
85
    input.checked = String(optValue) === String(value);
86
    input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;
87
    input.disabled = isReadOnly;
88

89
    const span = document.createElement('span');
90

91
    span.className = 'htUIRadioLabel';
92
    span.textContent = optLabel;
93

94
    label.appendChild(input);
95
    label.appendChild(span);
96
    wrapper.appendChild(label);
97

98
    input.addEventListener('change', (e) => {
99
      e.stopPropagation();
100
      const v = (e.target as HTMLInputElement).value;
101

102
      instance.setDataAtCell(row as number, column as number, v);
103
      queueMicrotask(() => {
104
        const newTd = instance.getCell(row as number, column as number);
105

106
        newTd?.querySelector<HTMLInputElement>(`input[type="radio"][value="${CSS.escape(v)}"]`)?.focus();
107
      });
108
    });
109

110
    label.addEventListener('mousedown', (e) => e.stopPropagation());
111

112
    input.addEventListener('keydown', (e) => {
113
      if (e.key === 'Escape') {
114
        e.preventDefault();
115
        e.stopPropagation();
116
        instance.selectCell(row as number, column as number);
117

118
        return;
119
      }
120
      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
121
        e.preventDefault();
122
        e.stopPropagation();
123
        cycle('next');
124

125
        return;
126
      }
127
      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
128
        e.preventDefault();
129
        e.stopPropagation();
130
        cycle('prev');
131

132
        return;
133
      }
134
      e.stopPropagation();
135
    });
136
  });
137

138
  td.appendChild(wrapper);
139
  td.style.verticalAlign = 'top';
140
});
141

142
registerCellType('radio', { editor: RadioEditor, renderer: radioRenderer });
143

144
/* start:skip-in-preview */
145
interface TaskRow {
146
  task: string;
147
  priority: string;
148
  status: string;
149
}
150

151
const data: TaskRow[] = [
152
  { task: 'Refactor licensing app navigation', priority: 'high',   status: 'in-progress' },
153
  { task: 'Theme Builder onboarding tour',     priority: 'medium', status: 'todo'        },
154
  { task: 'MCP server v1 release prep',        priority: 'high',   status: 'in-progress' },
155
  { task: 'GitHub triage rotation docs',       priority: 'low',    status: 'done'        },
156
  { task: 'shadcn/ui integration recipe',      priority: 'medium', status: 'todo'        },
157
];
158
/* end:skip-in-preview */
159

160
const priorityOptions: RadioOption[] = [
161
  { value: 'low',    label: 'Low'    },
162
  { value: 'medium', label: 'Medium' },
163
  { value: 'high',   label: 'High'   },
164
];
165

166
const statusOptions: RadioOption[] = [
167
  { value: 'todo',        label: 'Todo'        },
168
  { value: 'in-progress', label: 'In progress' },
169
  { value: 'done',        label: 'Done'        },
170
];
171

172
const ExampleComponent = () => {
173
  const hotRef = useRef<{ hotInstance: Handsontable.Core | null }>(null);
174

175
  const afterInit = function(this: Handsontable.Core) {
176
    this.rootElement.addEventListener('keydown', (e) => {
177
      if ((e.target as HTMLElement).tagName === 'INPUT') return;
178
      if (e.key !== 'Enter' && e.key !== 'F2') return;
179

180
      const sel = this.getSelectedLast();
181

182
      if (!sel) return;
183

184
      const [r, c] = sel;
185

186
      if (this.getCellMeta(r, c).type !== 'radio') return;
187

188
      const td = this.getCell(r, c);
189
      const target = td?.querySelector<HTMLInputElement>('input[type="radio"]:checked')
190
        ?? td?.querySelector<HTMLInputElement>('input[type="radio"]');
191

192
      if (target) {
193
        e.stopImmediatePropagation();
194
        e.preventDefault();
195
        target.focus();
196
      }
197
    }, true);
198
  };
199

200
  return (
201
    <HotTable
202
      ref={hotRef}
203
      data={data}
204
      colHeaders={['Task', 'Priority', 'Status']}
205
      rowHeaders={true}
206
      height="auto"
207
      width="100%"
208
      rowHeights={96}
209
      afterInit={afterInit}
210
      licenseKey="non-commercial-and-evaluation"
211
    >
212
      <HotColumn data="task"     type="text"  width={300} />
213
      <HotColumn data="priority" type="radio" width={160} {...{ options: priorityOptions } as object} />
214
      <HotColumn data="status"   type="radio" width={170} {...{ options: statusOptions } as object} />
215
    </HotTable>
216
  );
217
};
218

219
export default ExampleComponent;

1
/* Scoped to .htRadioCell so theme's .htUIRadio styles in context menus and
2
   filter panels are not affected. The radio indicator appearance (dot, border,
3
   checked state) is intentionally left to the Handsontable theme. */
4
.htRadioCell {
5
  display: flex;
6
  flex-direction: column;
7
  gap: 2px;
8
  padding: 4px 0;
9
  line-height: 1.4;
10
}
11

12
.htRadioCell .htUIRadio {
13
  display: inline-flex;
14
  align-items: center;
15
  gap: 8px;
16
  font-size: 13px;
17
  color: var(--ht-foreground-color, #1f2937);
18
  padding: 2px 6px !important;
19
  border-radius: 4px;
20
  cursor: pointer;
21
  user-select: none;
22
}
23

24
.htRadioCell .htUIRadioLabel {
25
  flex: 1;
26
}
27

28
/* Ensure pointer cursor and prevent default outline; theme handles appearance. */
29
.htRadioCell .htUIRadio > input[type='radio'] {
30
  cursor: pointer;
31
}

Overview

This guide shows how to build a renderer-based radio cell type. The radio buttons are always visible inside the cell — no editor popup. All interaction (click and keyboard) is handled by the renderer directly. The editor is a minimal stub required by the cell-type system.

Difficulty: Intermediate Time: ~20 minutes Libraries: None (pure HTML and CSS)

What You’ll Build

A cell type that:

Renders a list of labeled radio buttons directly in the cell (always visible, no editor popup)
Stores a single selected value per cell
Accepts an options array ({ value, label } or plain strings) per column
Supports keyboard navigation (ArrowDown, ArrowUp, Escape)
Uses roving tabindex for correct Tab behavior within the group
Exposes role="radiogroup" with a label derived from the column header
Works without any external libraries

Prerequisites

None. This uses only native HTML, CSS, and the Handsontable API.

Import Dependencies

1
import { useRef } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import { rendererFactory } from 'handsontable/renderers';
5
import { BaseEditor } from 'handsontable/editors/baseEditor';
6
import { registerCellType } from 'handsontable/cellTypes';
7

8
registerAllModules();

Add CSS Styling

Create a separate CSS file. All styles are scoped to .htRadioCell so they do not affect the same .htUIRadio classes used by context menus and filter panels.
```
1
.htRadioCell {
2
  display: flex;
3
  flex-direction: column;
4
  gap: 2px;
5
  padding: 4px 0;
6
  line-height: 1.4;
7
}
8

9
.htRadioCell .htUIRadio {
10
  display: inline-flex;
11
  align-items: center;
12
  gap: 8px;
13
  font-size: 13px;
14
  color: var(--ht-foreground-color, #1f2937);
15
  padding: 2px 6px !important;
16
  border-radius: 4px;
17
  cursor: pointer;
18
  user-select: none;
19
}
20

21
.htRadioCell .htUIRadioLabel {
22
  flex: 1;
23
}
24

25
.htRadioCell .htUIRadio > input[type='radio'] {
26
  cursor: pointer;
27
}
```
Handsontable token used:
- --ht-foreground-color — label text color
Why only layout CSS?

The Handsontable theme already handles radio indicator appearance (circle border, checked dot, colors) via .htUIRadio > input[type="radio"] using its own --ht-radio-* CSS variables. The CSS file only provides the container layout (vertical flex, padding, row alignment) without overriding those built-in indicator styles.

Editor Stub

Every cell type registered with registerCellType must include an editor. Because the renderer handles all interaction, the editor does nothing — its only job is satisfying the cell-type API.

1
class RadioEditor extends BaseEditor {
2
  init(): void {}
3
  open(): void {}
4
  close(): void {}
5
  focus(): void {}
6
  getValue(): string { return this.originalValue as string; }
7
  setValue(value: string): void { this.originalValue = value; }
8
}

Renderer — Build the Radio UI

The renderer builds the radio group on every render. It empties the cell, then creates one <label class="htUIRadio"> row per option.

1
const radioRenderer = rendererFactory(({ instance, td, row, column, value, cellProperties }) => {
2
  while (td.firstChild) td.removeChild(td.firstChild);
3

4
  const options = (cellProperties as RadioCellProperties).options || [];
5
  const wrapper = document.createElement('div');
6

7
  wrapper.className = 'htRadioCell';
8
  wrapper.setAttribute('role', 'radiogroup');
9

10
  // ARIA label from the column header
11
  const colHeader = instance.getColHeader(column as number);
12

13
  if (colHeader) wrapper.setAttribute('aria-label', String(colHeader));
14

15
  // ... build options, attach listeners, append to td
16
  td.appendChild(wrapper);
17
  td.style.verticalAlign = 'top';
18
});

What’s happening:

rendererFactory passes the full renderer context: instance, td, row, column, value, cellProperties.
cellProperties.options carries the per-column option list.
role="radiogroup" + aria-label make the group announce correctly to screen readers.
td.style.verticalAlign = 'top' aligns the stacked options to the top of the cell.

Roving Tabindex

Only one radio per group should be reachable with Tab. The checked option (or the first option when nothing is selected) gets tabIndex=0; all others get -1.

1
const hasChecked = options.some((opt) => {
2
  const v = typeof opt === 'object' ? opt.value : opt;
3

4
  return String(v) === String(value);
5
});
6

7
options.forEach((opt, idx) => {
8
  const optValue = typeof opt === 'object' ? opt.value : opt;
9
  const input = document.createElement('input');
10

11
  input.checked = String(optValue) === String(value);
12
  input.tabIndex = (input.checked || (!hasChecked && idx === 0)) ? 0 : -1;
13
  // ...
14
});

Why roving tabindex?

The ARIA Authoring Practices Guide for radio groups requires exactly one tabbable element in the group. This lets keyboard users Tab past a whole column of radio cells, then use arrow keys to navigate within a cell they care about.

Click and Change Handlers

Clicking a radio saves the value to the data model and restores focus after Handsontable re-renders the cell.
```
1
input.addEventListener('change', (e) => {
2
  e.stopPropagation();
3
  const v = (e.target as HTMLInputElement).value;
4

5
  instance.setDataAtCell(row as number, column as number, v);
6
  queueMicrotask(() => {
7
    const newTd = instance.getCell(row as number, column as number);
8

9
    newTd?.querySelector<HTMLInputElement>(`input[type="radio"][value="${CSS.escape(v)}"]`)?.focus();
10
  });
11
});
12

13
// Stop mousedown so Handsontable doesn't steal the click for cell selection.
14
label.addEventListener('mousedown', (e) => e.stopPropagation());
```
Why queueMicrotask?

setDataAtCell triggers a synchronous re-render that replaces the DOM. The focused element disappears. queueMicrotask schedules a microtask that runs after the render, finds the new radio by value, and refocuses it — without a visible flicker.

Why stop mousedown?

Handsontable listens for mousedown on the table to update cell selection. Without stopPropagation, clicking a radio also repositions the Handsontable cursor, which can interfere with focus management.

Each radio listens for arrow keys and Escape.

1
input.addEventListener('keydown', (e) => {
2
  if (e.key === 'Escape') {
3
    e.preventDefault();
4
    e.stopPropagation();
5
    instance.selectCell(row as number, column as number); // return focus to grid
6
    return;
7
  }
8
  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
9
    e.preventDefault();
10
    e.stopPropagation();
11
    cycle('next');
12
    return;
13
  }
14
  if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
15
    e.preventDefault();
16
    e.stopPropagation();
17
    cycle('prev');
18
    return;
19
  }
20
  // Block remaining keys from Handsontable's shortcut system.
21
  e.stopPropagation();
22
});

The cycle helper finds the current index, computes next/prev with wrap-around, calls setDataAtCell, and schedules a queueMicrotask focus restore — the same pattern as the click handler.

Enter / F2 Bridge

By default, Enter and F2 open the text editor on a cell. For radio cells, they should instead move focus into the radio group so the user can navigate with arrow keys.

Add a capture-phase listener on hot.rootElement after initialization:

1
hot.rootElement.addEventListener('keydown', (e) => {
2
  if ((e.target as HTMLElement).tagName === 'INPUT') return; // already inside a radio
3
  if (e.key !== 'Enter' && e.key !== 'F2') return;
4

5
  const sel = hot.getSelectedLast();
6

7
  if (!sel) return;
8

9
  const [r, c] = sel;
10

11
  if (hot.getCellMeta(r, c).type !== 'radio') return;
12

13
  const td = hot.getCell(r, c);
14
  const target = td?.querySelector<HTMLInputElement>('input[type="radio"]:checked')
15
    ?? td?.querySelector<HTMLInputElement>('input[type="radio"]');
16

17
  if (target) {
18
    e.stopImmediatePropagation();
19
    e.preventDefault();
20
    target.focus();
21
  }
22
}, true);

Why capture phase?

The true third argument makes this listener fire in the capture phase, before Handsontable’s own keydown handlers run. stopImmediatePropagation() prevents Handsontable from also opening the text editor.

Register and Use in Handsontable

1
registerCellType('radio', { editor: RadioEditor, renderer: radioRenderer });
2

3
<HotTable data={data} rowHeights={96} licenseKey="non-commercial-and-evaluation" ...>
4
  <HotColumn data="task"     type="text" />
5
  <HotColumn data="priority" type="radio" options={priorityOptions} />
6
  <HotColumn data="status"   type="radio" options={statusOptions}   />
7
</HotTable>

Why rowHeights: 96?

The default row height (~28 px) is too short to display three stacked options with padding. Setting a fixed height ensures the radio group fits without overflowing.

How It Works - Complete Flow

Render: Handsontable calls radioRenderer for each radio cell. The renderer empties the cell and builds the <label> / <input type="radio"> group from cellProperties.options.
View: Radio buttons are always visible. The checked option reflects the current cell value.
Click: The change event fires, calls setDataAtCell, and queues a microtask to refocus the now-rebuilt radio.
Arrow keys: Each radio’s keydown listener calls cycle(), which calls setDataAtCell and queues a focus restore.
Enter / F2: The capture-phase listener on rootElement catches the key before Handsontable, then focuses the checked (or first) radio.
Escape: The radio’s keydown listener calls instance.selectCell() to return focus to the grid cursor.

Enhancements

Allow Per-Cell Options

Override options from cellProperties at the cell level using Handsontable’s cells callback:

1
cells(row, col) {
2
  if (col === 1 && row === 2) {
3
    return { options: [{ value: 'critical', label: 'Critical' }] };
4
  }
5
}

Read-Only State

Mark individual cells as non-interactive by setting readOnly: true in the column or via cells():
```
1
columns: [
2
  { data: 'status', type: 'radio', options: statusOptions, readOnly: true },
3
]
```
The renderer checks cellProperties.readOnly and sets disabled on all radio inputs, which blocks both click changes and keyboard navigation. Handsontable also dims the cell background automatically.

Validator for Allowed Values

Reject values not present in the options list:

1
const radioValidator = (value, callback) => {
2
  callback(priorityOptions.some((o) => o.value === value));
3
};
4

5
columns: [
6
  { data: 'priority', type: 'radio', options: priorityOptions, validator: radioValidator },
7
]

Accessibility

Keyboard navigation:

Tab: Move to the next tabbable radio group (one per cell, via roving tabindex).
Enter / F2: Enter the radio group from the grid cursor.
ArrowDown / ArrowRight: Move to the next option (wraps).
ArrowUp / ArrowLeft: Move to the previous option (wraps).
Escape: Return focus to the grid.

Screen reader support:

role="radiogroup" on the wrapper.
aria-label derived from the column header.
Each option is a native <input type="radio"> with a visible <label>.

What you learned

You built a renderer-based radio cell type using Handsontable’s rendererFactory and a minimal BaseEditor stub. You learned the roving tabindex pattern, the queueMicrotask focus-restore technique, and how to intercept Enter/F2 in capture phase to bridge keyboard navigation between the grid cursor and the radio group.

Next steps

Feedback - Another custom cell type using editorFactory and an editor popup.
Star Rating - SVG-based custom renderer using rendererFactory.
Custom cell type - The full reference for renderer, editor, and validator registration.