---
tags: zeta-dom-react
---

# Forms

The use of `FormContext` and `useFormField` hooks allows easy implementation of any kind of form controls with high customizability, with validations and field values access.

import { Form, useFormContext } from "zeta-dom-react";

function Login() {
    const form = useFormContext();
    return (
        <Form context={form}>
            <TextField name="username" required label="Username" />
            <TextField name="password" required type="password" label="Password" />
            <Button label="Login" onClick={() => login(form.data)} />
        </Form>
    );
}

:::info
The library does not ship built-in field components. See [Building form controls](/2HfnDal5TAazIW673_seTA) for more information.
:::

## Examples

### To-do List

function ToDoList() {
    const [items, setItems] = useState<string[]>([]);
    const form = useFormContext();
    return (
        <Form context={form}>
            <ul>
                {items.map((v, i) => (<li key={i}>{v}</li>))}
            </ul>
            {/* TextField is a component using `useFormField` hooks */}
            <TextField name="item" />
            {/* value of the field "item" can be accessed through `form.data` */}
            <button onClick={() => setItems([...items, form.data.item]) } />
        </Form>
    );
}