usage
- Use when two or more controls answer one question or describe one bounded concept
- Keep one concise visible legend
- Do not replace a fieldset with a visually similar div
- Keep validation rules in the consuming application
Forms
Fieldset
Group related controls beneath one programmatically associated legend, hint and error.
Production component
Live preview
This example is rendered from the same package consumed by UJ applications.
Contract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
states
- default
- hint
- error
- disabled descendants
- long legend
- narrow viewport
- dark theme
- forced colours
purpose
Group related form controls under one visible, programmatically associated legend with optional supporting and error text.
responsive
- Fluid content width
- Long labels wrap without clipping
- 320px
- 768px
- 1440px
- 200% text resize
accessibility
- Native fieldset and legend semantics
- Hint and error are associated with aria-describedby
- Invalid state is not conveyed by colour alone
- Logical control order
- WCAG 2.2 AA
runtime Boundary
The component performs no validation, persistence, option inference or workflow transition.
source Authority
Corporate Identity presentation contract and the consuming application's form model