# Form

Renders a native form and provides its state to bound descendants.

## Signatures

```ts
export declare function Form<const Values extends object, E, R, const Options extends FormOptions<Values, E, R>, const Host extends HostResult = never>(options: Options & Pick<FormOptions<Values, E, R>, "state" | "content">, host?: Dom.HostOverride<Dom.RenderHostProps<Options, FormProps<Values, E, R, Options>>, Options["content"], Host>): SchemaBoundRootResult<Options, Host>;
```



## Examples

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

const codec = Schema.Struct({ email: Schema.String })
const view = Effect.gen(function* () {
  const state = yield* makeState(codec, { id: "signup", values: { email: "" } })
  return Form({
    state,
    content: html`${TextInput({ state, name: "email" })}${Submit({ content: "Join" })}`,
    onValidSubmit: (values) => Effect.log(`Submitting ${values.email}`)
  })
})
```