-
Multi-select components are sometimes very useful, but I haven't seen any example of how to best use remix-validated-form with such components? For example, would it be reasonable to use |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
There isn't really anything special you need to do for this. For a regular <select {...getInputProps({ multiple: true })}>
<option value="myOption1">My Option 1</option>
<option value="myOption2">My Option 2</option>
</select>
<ReactSelect
{...getIpnutProps({
multi: true,
options: [
{ label: 'My Option 1', value: 'myOption1' },
{ label: 'My Option 2', value: 'myOption2' },
]
})}
/> If you have a controlled component that doesn't have an actual const [selected, setSelected] = useState([]);
// One way
return (
<>
{selected.map(item => <input key={item.value} name="mySelect" type="hidden" value={item.value} />)}
<CustomSelect onChange={setSelected} value={selected} />
</>
)
// Another way
return (
<>
{<input name="mySelect" type="hidden" value={JSON.stringify(selected) />}
<CustomSelect onChange={setSelected} value={selected} />
</>
) |
Beta Was this translation helpful? Give feedback.
There isn't really anything special you need to do for this. For a regular
select
element, you can usegetInputProps
formuseField
like you normally would.react-select
should also be fine. It takes aname
prop so you don't even need a hidden input.If you have a controlled component that doesn't have an actual
input
, then you'll need to take the value …