---
# System prepended metadata

title: Controlled value and error
tags: [zeta-dom-react]

---

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

# Controlled value and error

## Using `value` property

Field value can be explicitly controlled.

```typescript
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.

```typescript
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.

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