Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Accordion Form Sections

ProNew

A long form in collapsible sections that validates all of them on submit, opens every section with a problem, flags it as needs attention in text and focuses the first invalid field.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this for application and onboarding forms with several groups of fields, where one page would be a wall.

Do not use it for short forms, or for steps that must be done in order (use a stepper).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

AccordionFormSections

Prop	Type	Default	Description
`sections`	`{ id, title, fields: { name, label, required? }[] }[]`	-	Sections and fields.
`onSubmit`	`(values: Record<string, string>) => void`	-	Called when every required field is filled.

Accessibility

A section with errors reads "Company, needs attention" and is opened; sections that are fine are left as they were.
Each field has aria-invalid and a linked role="alert" message; focus lands on the first invalid field.
Panels stay mounted (hidden when closed), so values in closed sections are part of the submit.

Keyboard

Key	Action
Enter in a field	submits
Enter or Space on a header	opens or closes a section

Testing

The pattern ships a Testing Library test (accordion-form-sections.test.tsx) that covers the initial state, opening problem sections with focus, linked messages and submitting across sections.