Search documentation

Search by topic, API name, or import path.

GitHub ↗

type-alias / @typed/ui/Form

InputComponent

Public component contract shared by state-explicit native input factories.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Native controls
Since
1.0.0

Import

import type { InputComponent } from "@typed/ui/Form";

Signatures

export type InputComponent<Value> = <const Values extends object, const Options extends InputOptions<Values, Value>, const Host extends HostResult = never>(options: Options & Pick<InputOptions<Values, Value>, "state" | "name">, host?: Dom.HostOverride<Dom.RenderHostProps<Options, InputProps<Values, Value>>, "", Host>) => Fx<RenderEvent, Schema.SchemaError | Renderable.Error<RenderableComponentOptions<Options> | Host>, Renderable.Services<RenderableComponentOptions<Options> | Host> | Scope.Scope | RenderTemplate>;

Examples

import { InputComponent, makeState, TextInput } from "@typed/ui/Form"
import { html } from "@typed/template"
import { Effect, Schema } from "effect"

const Text: InputComponent<string> = TextInput
const rendered = Effect.gen(function* () {
  const state = yield* makeState(Schema.Struct({ name: Schema.String }), {
    values: { name: "" }
  })
  return Text({ state, name: "name" }, (props) => html`<input ...${props} />`)
})

Other public imports

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

Source