JSVision

Appearance

@jsvision/forms / bindCheck

Function: bindCheck() ​

bindCheck<T>(field, options): Signal<boolean[]>

Defined in: bind-choice.ts:85

Adapt a multi-choice field to a CheckGroup's Signal<boolean[]> (one flag per option), keeping the field's value as the list of selected values so validation runs on the domain array.

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 and maps each option to whether it is currently selected (includes), so the domain array may be in any order; writing a flag array replaces field.value with the options whose flag is truthy, in option order.

Gotcha: only members of options are ever written back, so a selected value not in options is dropped on the first widget write-back. Keep options equal to the field's enum (model the field as z.array(z.enum([...options]))) so every value is representable.

Type Parameters ​

T ​

T

Parameters ​

field ​

Field<T[]>

The multi-choice field handle (its value is the selected-values array).

options ​

readonly T[]

The choices, in display order; flag i corresponds to options[i].

Returns ​

Signal<boolean[]>

A Signal<boolean[]> lens suitable as a CheckGroup's value.

Example ​

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

const options = ['bold', 'italic', 'underline'];
const form = createForm({
  schema: z.object({ styles: z.array(z.enum(['bold', 'italic', 'underline'])) }),
  initial: { styles: ['bold'] },
});
const group = new CheckGroup({
  labels: ['~B~old', '~I~talic', '~U~nderline'],
  value: bindCheck(form.field('styles'), options),
});
new Group().add(group);
// Checking "Italic" makes form.field('styles').value() deep-equal ['bold', 'italic'] (option order).