@gluonjs/core / src / CheckboxModelOptions

Type Alias: CheckboxModelOptions<Value>

CheckboxModelOptions<Value> = BaseModelOptions<Value> & object & Value extends readonly infer Item[] ? object : Value extends boolean ? object : object

Type Declaration

kind

readonly kind: "checkbox"

Type Parameters

Value

Value

Example

Bind a boolean checkbox or membership of one value in an array model with optional modifiers and transformation:

import {
  model,
  type CheckboxModelOptions,
  type CustomModelOptions,
  type ModelBinding,
  type ModelModifiers,
  type ModelOptions,
  type RadioModelOptions,
  type SelectModelOptions,
  type TextModelOptions,
  type WritableModel,
} from '@gluonjs/core';

const quantity: WritableModel<number> = { value: 1 };
const modifiers = { trim: true, number: true } satisfies ModelModifiers;
const text = { kind: 'text', modifiers } satisfies TextModelOptions<number>;
const textBinding: ModelBinding = model(quantity, text);
const colors: WritableModel<readonly string[]> = { value: ['blue'] };
const checkbox = { kind: 'checkbox', value: 'black' } satisfies CheckboxModelOptions<readonly string[]>;
const checkboxBinding = model(colors, checkbox);
const size: WritableModel<string> = { value: 'medium' };
const radio = { kind: 'radio', value: 'large' } satisfies RadioModelOptions<string>;
const radioBinding = model(size, radio);
const select = { kind: 'select' } satisfies SelectModelOptions<string>;
const selectBinding = model(size, select);
const custom = { kind: 'custom', property: 'modelValue', event: 'update:modelValue' } satisfies CustomModelOptions<string>;
const customOptions: ModelOptions<string> = custom;
const customBinding = model(size, customOptions);
console.log(textBinding, checkboxBinding, radioBinding, selectBinding, customBinding);