Form Sections

ProNew

Section navigation for long forms: a sticky list of anchor links that tracks the section in view, shows error counts and completed marks, and moves focus to the section heading you pick.

Customize

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

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/form-sections

Usage

Props

Prop (`FormSectionNav`)	Type	Description
`sections`	`{ id, label, errors?, complete? }[]`	The ids match `FormSection` ids.
`offset`	`number`	Pixels kept above the section in view. Default 24.
`label`	`string`	Accessible name of the nav.

FormSection takes id, title, description and the usual section attributes.

Accessibility

A nav landmark with a name, holding real links; the section in view has aria-current="location".
Activating a link scrolls to the section and moves keyboard focus to its heading, so the next Tab enters the section. Smooth scrolling is off under prefers-reduced-motion.
Error counts and the completed mark have text alternatives ("2 errors", "complete"); the visible number is hidden from assistive technology so it is not read twice.
Each FormSection is a section named by its heading, which makes it a region in landmark lists.

Testing

The component ships with a Testing Library test (form-sections.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/form-sections

Usage

Props

Prop (`FormSectionNav`)	Type	Description
`sections`	`{ id, label, errors?, complete? }[]`	The ids match `FormSection` ids.
`offset`	`number`	Pixels kept above the section in view. Default 24.
`label`	`string`	Accessible name of the nav.

FormSection takes id, title, description and the usual section attributes.

Accessibility

A nav landmark with a name, holding real links; the section in view has aria-current="location".
Activating a link scrolls to the section and moves keyboard focus to its heading, so the next Tab enters the section. Smooth scrolling is off under prefers-reduced-motion.
Error counts and the completed mark have text alternatives ("2 errors", "complete"); the visible number is hidden from assistive technology so it is not read twice.
Each FormSection is a section named by its heading, which makes it a region in landmark lists.

Testing

The component ships with a Testing Library test (form-sections.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.