v0.3.1

What's Changed

Conform guide (https://conform.guide)

This includes updated examples and a new Get started guide covering the core ideas behind conform.
I hope you will find it useful 😅

Autofocus first error field

Conform now automatically focus on first error field whenever user tries to initiate a form submission.
This applies to all native input fields with no changes required.

However, if you are working with controlled inputs and you want to have the invalid fields focused as well, you will need to pass the ref object provided by useControlledInput() to the input.

For example, you need to pass the ref object as inputRef with material-ui:

export default function ArticleForm() {
  const formProps = useForm();
  const { category } = useFieldset<Article>(formProps.ref);
  const [categoryInput, control] = useControlledInput(category.config);

  return (
    <form {...formProps}>
      <Stack spacing={3}>
        <input {...categoryInput} required />
        <TextField
          label="Category"
          inputRef={control.ref}
          value={control.value}
          onChange={control.onChange}
          onBlur={control.onBlur}
          error={Boolean(category.error)}
          helperText={category.error}
          inputProps={{
            // To disable browser report caused by the required
            // attribute set by mui input
            onInvalid: control.onInvalid,
          }}
          select
          required
        >
          <MenuItem value="">Please select</MenuItem>
          <MenuItem value="a">Option A</MenuItem>
          <MenuItem value="b">Option B</MenuItem>
          <MenuItem value="c">Option C</MenuItem>
        </TextField>
        <Button type="submit" variant="contained">
          Submit
        </Button>
      </Stack>
    </form>
  );
}

You can check out the full example here

New Contributors

• @abenhamdine made their first contribution in #26
• @brandonpittman made their first contribution in #28

Thank you!

Full Changelog: v0.3.0...v0.3.1