Pattern library
Each component below is built once and reused across the site. The sample data is invented and carries no municipal meaning.
Data tables
Every data table has a caption and real header cells. The second example uses row headers as well as column headers.
| Board | Meets | Time | Location |
|---|---|---|---|
| Township Council | First and third Tuesday | 7:00 pm | Council Chambers |
| Planning Board | Second Wednesday | 7:30 pm | Council Chambers |
| Zoning Board of Adjustment | Fourth Wednesday | 7:30 pm | Council Chambers |
| Environmental Commission | Third Monday | 6:30 pm | Meeting Room B |
| Permit | Application fee | Renewal |
|---|---|---|
| Dog license, spayed or neutered | $12.00 | $12.00 annually |
| Dog license, not altered | $18.00 | $18.00 annually |
| Block party and street closure | $35.00 | Not renewable |
| Zoning permit, residential shed | $60.00 | Not renewable |
Form fields
Labels are visible and bound to their control. Format hints are real text, not placeholders. Required fields say so in words.
Field in an error state
The error is identified in text, sits next to the field it describes, and is announced with the field through aria-describedby.
Format: block number, then lot number, separated by a dash. Example: 104-27
Error: Enter the block and lot in the format 104-27.
Disclosure
Operable from the keyboard, reports its state with aria-expanded, and closes on Escape without trapping focus.
A zoning permit confirms that a proposed use or structure is allowed on a property before construction begins. It is separate from a construction permit.