Label
Form labels with optional hint text, always visible and always attached.
We only use this to send your requested records.
Show the markup
<label class="cc-label" for="ex-label">Email address <span class="cc-label__optional">(optional)</span></label>
<p class="cc-hint" id="ex-label-hint">We only use this to send your requested records.</p>
<input class="cc-input" type="email" id="ex-label" aria-describedby="ex-label-hint">Accessibility
- Every control gets a visible
<label for>— placeholder text is never a label. - Mark the optional fields, not the required ones (most civic forms are mostly required).
- Hints connect via
aria-describedby.