Make form components uncontrollable #1683
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
A few versions ago we introduced compatibility with the native `form` element. This means that behind the scenes we render hidden inputs that are kept in sync which allows you to submit your normal form and get data via `new FormData(event.currentTarget)`. Before this change every form related component (Switch, RadioGroup, Listbox and Combobox) always had to be passed a `value` and an `onChange` regardless of this change. This change will allow you to not even use the `value` and the `onChange` at all and keep it completely uncontrolled. This has some changes: - `value` is made optional - `onChange` is made optional (but will still be called if passed regardless of being controlled or uncontrolled) - `defaultValue` got added so that you can still pre-fill your values with known values. - `value` render prop got exposed so that you can still use this while rendering. This should also make it completely compatible with tools like Remix without wiring up your own state.
RobinMalfait
force-pushed
the
feat/uncontrolled-form-components
branch
from
b4d9ce7
to
de8474f
Compare
RobinMalfait
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR allows our form related components (Switch, RadioGroup, Listbox and Combobox) to be both controlled and uncontrolled (new).
This has the benefit that you don't have to do any wiring yourself if you just want to choose values from a know list and use the good old
<form>element to submit your values.Add a
nameprop to those components (more info: Listbox example https://headlessui.com/react/listbox#using-with-html-forms) and you should be good to go!