Form fields

[xania]

In Xania it should be fearly easy to have headless form fields support. A possible implementation should take the following into consideration:

• fields should be reactive in and out: take in state and generation commands
• independent of style, but easy / intuitive to add
• compatible with event delegation, some events like 'focus' do not support event delegation in xania.
• declarative validations
• validate only if touched (blur / leave)
• validate agains external source
• programmatically update form validation,
• isValid indicator
• auto sync to backend
• ...

Example api

function App() {
  const form = useForm({ company: 'xania'});
  return (
    <input>
      <InputField value={form.company} />
      <InputValidation value={form.company} />
    </input>
  );
}

// headless form field component
function InputField(props: {value: State<string>}) {
  return (
    <>
      <Attrs value={props.value} change={e => props.value.update(e.currentTarget.value)} />
    </>
  );
}

....