function / @typed/ui

Checkbox.Input

Renders a native checkbox input synchronized with hydrated state.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Native controls
Since
1.0.0
Member of
Checkbox

Import

import { Checkbox } from "@typed/ui";

Access Checkbox.Input through the imported Checkbox export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function Input<const Options extends InputOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, InputInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Options | Host>;

Examples

import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import * as Checkbox from "@typed/ui/Checkbox";
import { component } from "@typed/template";

export const UpdatePreference = component(function* () {
  const state = yield* Checkbox.makeState({ checked: false });
  const message = RefSubject.map(state, ({ checked }) =>
    checked === true ? "Product updates enabled" : "Product updates disabled",
  );
  return html`<div class="preference">
    <label>
      ${Checkbox.Input({ state, props: { name: "updates", value: "yes" } })}
      Receive product updates
    </label>
    <p>${message}</p>
  </div>`;
});

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source