React Form with Conditional Fields
Conditional fields appear or disappear based on other field values — an employment form that shows a company name field only when the user selects "Employed" is a classic example. The critical detail developers miss is clearing the hidden field's value when the condition changes, so no stale data gets submitted if the user changes their answer.
The challenge
Conditional rendering logic quickly becomes complex in dynamic React forms, especially when hidden field values need to be cleared to prevent stale data submission.
- Clearing the value of a field that just became hidden so it does not get submitted
- Handling multiple conditions — where different selections show different sets of fields
- Preventing layout shift when fields appear and disappear suddenly
- Maintaining accessibility by ensuring conditionally shown fields are focused or announced correctly
Working code example
Here is a complete, self-contained working example you can drop directly into any React project. It uses Tailwind CSS for styling and requires no external dependencies beyond React itself.
import { useState } from 'react';
const EMPLOYMENT_TYPES = ['Employed', 'Self-employed', 'Student', 'Unemployed'];
export default function ConditionalForm() {
const [type, setType] = useState('');
const [company, setCompany] = useState('');
const [university, setUniversity] = useState('');
const [submitted, setSubmitted] = useState(false);
const showCompany = type === 'Employed' || type === 'Self-employed';
const showUniversity = type === 'Student';
const handleType = (e) => {
const val = e.target.value;
setType(val);
setCompany('');
setUniversity('');
};
const handleSubmit = (e) => {
e.preventDefault();
if (!type) { alert('Please select an employment type'); return; }
if (showCompany && !company.trim()) { alert('Please enter your company name'); return; }
if (showUniversity && !university.trim()) { alert('Please enter your university'); return; }
setSubmitted(true);
};
if (submitted)
return (
<div className="max-w-sm mx-auto p-6 bg-green-50 rounded-2xl text-green-700">
<p className="font-semibold">Profile saved!</p>
<p className="text-sm mt-1">
{type}
{showCompany && company ? ` · ${company}` : ''}
{showUniversity && university ? ` · ${university}` : ''}
</p>
</div>
);
return (
<form onSubmit={handleSubmit} className="max-w-sm mx-auto p-6 bg-white rounded-2xl shadow space-y-4">
<h2 className="text-xl font-bold text-gray-800">Employment Details</h2>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Employment Type</label>
<select value={type} onChange={handleType}
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500 bg-white">
<option value="">Select type…</option>
{EMPLOYMENT_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
</select>
</div>
{showCompany && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
{type === 'Self-employed' ? 'Business Name' : 'Company Name'}
</label>
<input value={company} onChange={(e) => setCompany(e.target.value)}
placeholder={type === 'Self-employed' ? 'Your business name' : 'Your employer'}
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500" />
</div>
)}
{showUniversity && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">University / College</label>
<input value={university} onChange={(e) => setUniversity(e.target.value)}
placeholder="Your institution"
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500" />
</div>
)}
{type === 'Unemployed' && (
<p className="text-sm text-gray-500 bg-gray-50 rounded-lg p-3">
No additional information needed.
</p>
)}
<button type="submit"
className="w-full bg-teal-600 text-white font-semibold py-2 rounded-lg hover:bg-teal-700 transition">
Save Profile
</button>
</form>
);
}How ReactForm.co helps
ReactForm's visual builder handles all of the above — conditional fields configuration, validation rules, state management, and responsive layout — without writing a single line of code. Drag fields onto the canvas, configure their properties in the sidebar, and get production-ready React output. You can publish the form and collect responses instantly, or export the JSX to drop into your own codebase.
Build this form visuallyFrequently asked questions
How do I show or hide fields conditionally in React?
Use conditional rendering: {condition && <FieldComponent />}. The field is removed from the DOM entirely when the condition is false, so there is no hidden field that could accidentally submit stale data. This is simpler and more correct than using CSS visibility or display.
Why do I need to clear hidden field values?
If you use CSS to hide a field instead of removing it, the field still holds a value that will be included in your form state when you submit. Clear the hidden field's state variable to an empty string whenever the condition changes — typically in the onChange handler of the field that controls the condition.
How do I handle many conditional rules without spaghetti code?
Define your conditions as named boolean variables at the top of the component: const showCompany = type === "Employed" || type === "Self-employed". Reference these variables in your JSX and validation logic. For very complex forms, consider a conditions object that maps field names to boolean expressions.
Related topics
Build this form visually — no code needed
ReactForm.co handles conditional fields fields, validation, conditional logic, and responsive layout automatically. Publish in minutes and collect responses for free.