Switch

Import

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

Signatures

export declare function Switch<const Options extends SwitchOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SwitchInternalProps<Options>>, Options["content"], 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 Switch from "@typed/ui/Switch";

export const PreviewSetting = component(function* () {
  const state = yield* Switch.makeState({ checked: true });
  const status = RefSubject.map(state, ({ checked }) => checked ? "On" : "Off");
  return html`<section>
    ${Switch.Switch({
      state,
      content: "Show live preview",
      props: { class: "preview-switch", "aria-describedby": "preview-setting-help" },
    })}
    <span aria-hidden="true">${status}</span>
    <p id="preview-setting-help">Updates the preview while you edit.</p>
  </section>`;
});

Other public imports

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

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

Source

• packages/ui/src/Switch.ts:167