usage
- Use for meaningful groups within a longer form
- Keep heading levels consistent with the containing page
- Use fieldsets for related choice controls inside the section
- Keep workflow and validation logic in the consuming application
Forms
Form section
Organise one meaningful part of a longer form with a named heading and supporting context.
Production component
Live preview
This example is rendered from the same package consumed by UJ applications.
Programme identity
Use the verified value supplied by the owning system.
This value appears on the published programme page.
RequiredContract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
states
- title only
- title and summary
- long content
- narrow viewport
- dark theme
- forced colours
purpose
Divide a longer form into a small number of named, understandable sections without turning each field into an unrelated panel.
responsive
- Fluid section width
- Controlled reading measure for context
- 320px
- 768px
- 1440px
- 200% text resize
accessibility
- Semantic section named by its visible heading
- Content follows its heading in source order
- Summary does not replace field instructions
- WCAG 2.2 AA
runtime Boundary
The component performs no validation, persistence, routing or workflow decisions.
source Authority
Corporate Identity presentation contract and the consuming application's information architecture