Custom inputs

A component that renders no <input name> — a rich text editor, a custom picker — never reaches the FormData on its own. This page shows how HiddenValue puts such a value into the submission.

On this page

Park the value in a hidden field

Keep the component’s value in state, and hand the same value to HiddenValue. Its name is the field’s path in the schema.

post-form.tsx

Copy code

const [body, setBody] = useState(post.body);

<Editor onChange={setBody} value={body} />
<HiddenValue name="body" value={body} />

HiddenValue renders a plain <input type="hidden">, so the value goes out with the rest of the form. No code gathers it at submit time.

Why it is a component, not a props helper

React updates a controlled value without any DOM event, so with a bare hidden input neither the cross-field rules nor isDirty would notice the change.

HiddenValue fires an input event on every change, so the rules and isDirty update just as they do for a keystroke.

Things to watch

Pitfall

A hidden input is barred from the browser’s constraint validation. Constraints such as required or min are not checked in the browser; the server checks them after the submission.

Resetting the form does not restore a HiddenValue: the value is the caller’s state. To put the state back as well, call form.props.onReset() from your own onReset, then reset it.

post-form.tsx

Copy code

<form
  {...form.props}
  onReset={() => {
    form.props.onReset();
    setBody(post.body);
  }}
>

Note

@k8ordo/ui’s components put their values into the submission themselves. Even Autocomplete, whose visible part is not what submits, needs no HiddenValue.

Playground

Submit a star rating

The star buttons are a hand-made control with no <input>. The chosen value goes into the submission through HiddenValue.

Try it

Choose a star. isDirty turns true, because HiddenValue announces the change with an event.
Press “Submit”. The value that would be sent shows, as in rating=3.
Press “Revert”. The stars and isDirty both go back.