JSVision

Appearance

@jsvision/forms / bindRadio

Function: bindRadio() ​

bindRadio<T>(field, options): Signal<number>

Defined in: bind-choice.ts:39

Adapt a single-choice field to a RadioGroup's Signal<number> (the selected index), keeping the field's value in domain terms so validation runs on the real value, never an index.

The returned value is a stateless lens over field.value — it stores nothing and holds no subscription of its own. Reading it subscribes to field.value (so the group repaints when the domain value changes); writing an index sets field.value to the matching option.

Gotchas:

  • A domain value not in options reads back as -1. Seed a valid initial (or a schema default) so the first read isn't -1.
  • Setting an out-of-range index writes undefined to the field — there is no bounds guard, because a RadioGroup only ever sets 0..options.length-1. Keep options aligned with the schema.

Type Parameters ​

T ​

T

Parameters ​

field ​

Field<T>

The single-choice field handle.

options ​

readonly T[]

The choices, in display order; index i maps to options[i].

Returns ​

Signal<number>

A Signal<number> lens suitable as a RadioGroup's value.

Example ​

ts
import { Group, RadioGroup } from '@jsvision/ui';
import { createForm, bindRadio } from '@jsvision/forms';
import { z } from 'zod';

const options = ['left', 'center', 'right'];
const form = createForm({
  schema: z.object({ align: z.enum(['left', 'center', 'right']) }),
  initial: { align: 'left' },
});
const group = new RadioGroup({
  labels: ['~L~eft', '~C~enter', '~R~ight'],
  value: bindRadio(form.field('align'), options),
});
new Group().add(group);
// Selecting "Right" sets form.field('align').value() to 'right' — validation sees the enum, not an index.