Skip to content

v5.0.0-alpha.8

Pre-release
Pre-release

Choose a tag to compare

View all tags
@danielweinmann danielweinmann released this 26 Mar 18:27
· 30 commits to main since this release
v5.0.0-alpha.8
e44288c

Breaking Changes

Checkbox and radio inputs now nest inside labels (#408)

Checkbox and radio <input> elements are now rendered inside their <label>, following MDN best practice. This eliminates click "blind areas" between inputs and their label text.

The checkboxWrapper and radioWrapper component slots have been removed (16 → 14 slots), as the label now serves as the wrapper.

Before:

<div class="wrapper">
  <input type="checkbox" id="agree" />
  <label for="agree">I agree</label>
</div>

After:

<label>
  <input type="checkbox" />
  I agree
</label>

Field now accepts SmartInput props directly; wrapper props move to fieldProps (#411)

Field accepts type-safe props from the inferred SmartInput slot directly — no children render prop needed for simple cases:

// Before — children render prop just to pass rows:
<Field name="bio" multiline>
  {({ SmartInput }) => <SmartInput rows={5} />}
</Field>

// After — rows goes directly on Field:
<Field name="bio" multiline rows={5} />

Wrapper customization (e.g. className, style) moves to an explicit fieldProps prop:

<Field name="bio" multiline rows={5} fieldProps={{ className: "wrapper" }} />

New peer dependency: @remix-run/form-data-parser (#417)

File upload support introduces a new peer dependency. Install it alongside remix-forms:

pnpm add @remix-run/form-data-parser

Bumped peer dependencies (#417)

  • coerce-form-data bumped from >=2 to >=2.1
  • schema-info bumped from >=0.3.0 to >=0.4.1

New Features

  • First-class file upload support (#417) — z.instanceof(File) auto-renders <input type="file">, auto-sets encType="multipart/form-data", validates file size/type on the client, and integrates with @remix-run/form-data-parser on the server via a new uploadHandler option. New fileInput component slot and accept form-level prop.
  • Fields component (#412) — Automatic field rendering inside custom layouts. Use <Fields /> without children for the default layout, or with <Field> children as overrides.
  • renderForm prop (#413) — Customize the default form layout when no children are provided, following the same pattern as renderField. Also available as a factory option via makeSchemaForm.
  • renderField in makeSchemaForm options (#415) — Set a global renderField at the factory level; per-form renderField overrides it.
  • Auto-render hidden fields with custom children (#416) — Hidden fields declared via hiddenFields are now automatically rendered even when using custom children without <Fields />.
  • checkboxLabel and radioLabel component slots (#407) — Independent styling of checkbox/radio option labels vs the field-level label.
  • Schema-level autoComplete prop (#403) — Per-field autoComplete attribute, same pattern as labels and placeholders.
  • Field wrapper props inferred from component slot (#409) — FieldProps now infers wrapper props from the resolved field component instead of hardcoding div props.

Bug Fixes

  • Fix button name/value not serialized on client-side submit (#404) — Closes #158
  • Strip defaultValue/defaultChecked from user-facing children components (#405) — Closes #168
  • Pass type="hidden" to inputs when Field is hidden (#406) — Closes #227
  • Forward all makeField props to Field with custom children (#410)

What's Changed

Full Changelog: v5.0.0-alpha.7...v5.0.0-alpha.8

Contributors

danielweinmann
Assets 2
Loading