# Input

Renders a native checkbox input synchronized with hydrated state.

## Signatures

```ts
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

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

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>`;
});
```