Skip to main content Curbcut by Baseline
Menu
All components

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

  • cc-label--on-deep for a label on a brand-deep surface (a header language picker); cc-label--inline when the label sits beside its control rather than above it.
  • 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.