Replies: 1 comment
-
You can model this with a multi select element like this one. Typescript will warn you if you do this now but it will work fine if you render the select element yourself. I also have a PR #419 ready that should fix the issue and works without rendering a select manually. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
We work with various custom components that represent non-native inputs and trying to find the best pattern for integrating with Conform v1. One example is https://github.com/ericgio/react-bootstrap-typeahead
Ultimately (in this example), the goal is to allow a user to select multiple items (e.g., pizza toppings) from a combobox and include an array of the selected item ids in the submission data. Without Zod and Conform, one might include these selected ids in the form data by rendering each one as an input with the corresponding id as the value but all sharing the same name. Then, you could pull them out with
formData.getAll('toppingId')
. We haven't figured out how to do this with Zod + Conform (the field list/array helpers don't seem applicable here, but maybe we're missing something).In Conform v1, it seems a field value cannot be an array (at least not according to TypeScript and
defaultValue
), so we're callingJSON.stringify
on the array of ids and storing that in a field value. But this means we also have to callJSON.parse
to read it back out. This works, but we're just wondering if there's a better way?FWIW, our schema looks like this:
And our Conform initialization:
Then to read/write:
Beta Was this translation helpful? Give feedback.
All reactions