SpinButton

Import

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

Signatures

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

Examples

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

export const CopyCount = component(function* () {
  const state = yield* SpinButton.makeState({ value: 1 });
  const summary = RefSubject.map(state, ({ value }) => `Copies requested: ${value}`);
  return html`<div class="copy-count">
    <label for="print-copies">Number of copies</label>
    ${SpinButton.SpinButton({
      state, min: 1, max: 100, step: 1,
      props: { id: "print-copies", name: "copies", required: true },
    })}
    <p>${summary}</p>
  </div>`;
});

Other public imports

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

• SpinButton.SpinButton from @typed/ui
• SpinButton.SpinButton from @typed/ui/index

Source

• packages/ui/src/SpinButton.ts:159