Conditionally hide/disable/etc. form fields

[lauraseidler]

I have a few form fields that are conditional based on other form fields - something along the lines of "if this checkbox is checked, show also these fields" or "if this value is selected here, disable this other field".

I've been trying to find a way to do this with remix, but anything I found relies on happening in an action - which is a bit too late for me, as the user shouldn't have to submit the form before seeing the extra fields.

Is there a "remix-y" way to handle this, or am I going to have to go back to tracking form state manually (which is one thing I was trying to avoid by using remix)?

Happy for any ideas! :)

[kiliman]

UI is handled by React, so you'll need to do the same thing you would do in any other React app unfortunately. Basically onChange and setState. You don't need to track form state in React. But the visibility of fields:

<input onChange={(e) => setIsFieldVisible(e.target.value === 'some value')} />

{isFieldVisible && <input type="text" name="field" defaultValue={fieldValue} />}