How to handle textarea in form?

[vedantroy]

I'm not sure how to handle a text area in a ValidatedForm?
There does not seem to be a useField equivalent for textareas.
Is the trick to just use a hidden input & have the hidden input's value be synced to the textarea's value?

Edit have a possibly working solution that looks like this:

const ValidatedTextarea = ({ name, /* onChange, */ className, defaultValue }: TextAreaProps) => {
    const { error, getInputProps } = useField(name);
    const { onBlur, onChange, ...rest } = getInputProps({ id: name });
    const [text, setText] = useState(defaultValue || "");
    return (
        <div>
            <Textarea
                value={text}
                onChange={e => {
                    setText(e.target.value);
                    onChange(e.target.value);
                }}
                onBlur={e => {
                    onBlur(e);
                }}
                className={className || ""}
            />
            <input value={text} type="hidden" {...rest} />
            {error && <div className="text-xs mt-0.5 text-rose-600">{error}</div>}
        </div>
    );
};

[airjp73]

Handling for textareas should be identical to regular inputs.

<textarea {...getInputProps({})} />

If you're using a textarea from a component library that doesn't pass the name attribute to the textarea element, you could treat it like a controlled component and use useControlField + a hidden input.