React Form with Form Sections
Dividing a long form into named sections with visual dividers reduces cognitive load for users and makes the form easier to maintain. Each section groups related fields — personal info, contact details, preferences — making the form scannable and reducing the chance users skip important fields because they did not see them.
The challenge
Large forms become hard to manage without proper grouping and structure, both for users who fill them out and developers who maintain them.
- Deciding how to divide fields into sections without creating too many or too few groups
- Making section headings visually distinct without them competing with the form title
- Placing the submit button correctly so it is clear it applies to the entire form, not just the last section
- Maintaining accessible form structure so screen readers understand the grouping
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';
function Section({ title, children }) {
return (
<div>
<div className="flex items-center gap-3 mb-4">
<h2 className="text-base font-semibold text-gray-700 whitespace-nowrap">{title}</h2>
<div className="flex-1 h-px bg-gray-200" />
</div>
<div className="space-y-3">{children}</div>
</div>
);
}
function Field({ label, type = 'text', value, onChange, id }) {
return (
<div>
<label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
<input id={id} type={type} value={value} onChange={onChange}
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>
);
}
export default function SectionedForm() {
const [form, setForm] = useState({
name: '', dob: '', email: '', phone: '', newsletter: false, theme: 'light',
});
const [submitted, setSubmitted] = useState(false);
const set = (key, val) => setForm((f) => ({ ...f, [key]: val }));
if (submitted)
return <p className="max-w-md mx-auto p-6 text-green-600 font-medium">Registration complete!</p>;
return (
<form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
className="max-w-md mx-auto p-6 bg-white rounded-2xl shadow space-y-8">
<h1 className="text-xl font-bold text-gray-800">Create Account</h1>
<Section title="Personal Info">
<Field id="name" label="Full Name" value={form.name} onChange={(e) => set('name', e.target.value)} />
<Field id="dob" label="Date of Birth" type="date" value={form.dob} onChange={(e) => set('dob', e.target.value)} />
</Section>
<Section title="Contact Details">
<Field id="email" label="Email Address" type="email" value={form.email} onChange={(e) => set('email', e.target.value)} />
<Field id="phone" label="Phone Number" type="tel" value={form.phone} onChange={(e) => set('phone', e.target.value)} />
</Section>
<Section title="Preferences">
<label className="flex items-center gap-3 cursor-pointer">
<input type="checkbox" checked={form.newsletter} onChange={(e) => set('newsletter', e.target.checked)}
className="w-4 h-4 accent-teal-600" />
<span className="text-sm text-gray-700">Subscribe to newsletter</span>
</label>
<div>
<p className="text-sm font-medium text-gray-700 mb-2">Theme</p>
<div className="flex gap-4">
{['light', 'dark'].map((t) => (
<label key={t} className="flex items-center gap-2 cursor-pointer">
<input type="radio" name="theme" value={t} checked={form.theme === t}
onChange={() => set('theme', t)} className="accent-teal-600" />
<span className="text-sm text-gray-700 capitalize">{t}</span>
</label>
))}
</div>
</div>
</Section>
<button type="submit"
className="w-full bg-teal-600 text-white font-semibold py-2 rounded-lg hover:bg-teal-700 transition">
Create Account
</button>
</form>
);
}How ReactForm.co helps
ReactForm's visual builder handles all of the above — form sections 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
Should I use fieldset and legend for form sections?
Yes, <fieldset> with a <legend> is the semantically correct way to group related form fields. It communicates the grouping to screen readers and assistive technology. In practice, many developers use div + h2 for visual reasons, but fieldset/legend should be preferred for accessibility. You can style fieldset to look exactly like a div by removing the default border.
How many fields should be in each form section?
Aim for 3–6 fields per section. Fewer than 3 makes the grouping feel unnecessary. More than 6 starts to feel like it should be its own step in a multi-step form. Group fields that are genuinely related in the user's mental model, not just fields that happen to appear close together.
What is the difference between form sections and a multi-step form?
Form sections show all fields at once, grouped with visual headers on a single page. A multi-step form shows one group at a time and requires navigation between steps. Use sections when the total field count is manageable on one page (roughly under 15 fields). Use multi-step when the form is long, the steps have a logical sequence, or users need to complete sections at different times.
Related topics
Build this form visually — no code needed
ReactForm.co handles form sections fields, validation, conditional logic, and responsive layout automatically. Publish in minutes and collect responses for free.