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

# Controlled value and error

## Using `value` property

Field value can be explicitly controlled.

function Component() {
    const form = useFormContext();
    const [value, setValue] = useState('');
    return (
        <Form context={form}>
            <TextField name="item" value={value} onChange={setValue} />
        </Form>
    );
}

## Using `error` property

Field can be explicitly set to erroreous state by providing `error` property.

function Component() {
    const form = useFormContext();
    return (
        <Form context={form}>
            <TextField name="item" error="Custom error" />
        </Form>
    );
}

## Using `FormContext.setError` method

Another way is to use `FormContext.setError` method.

function Component() {
    const form = useFormContext();
    return (
        <Form context={form}>
            <TextField name="item" />
            <button onClick={setError}>Set error</button>
        </Form>
    );

    function setError() {
        form.setError('item', 'Custom error');
    }
}