Form field

How to use it

Pair every text input with a visible <label>; never rely on a placeholder alone. Show the error paragraph only while that field is invalid, and keep aria-invalid in sync with whether it is.

Accessibility

The <label for> is matched to the <input id>, so clicking the label focuses the field and screen readers announce the field's name. aria-describedby points the error text at the input so it is read as part of the field's description, and aria-invalid marks the field as currently failing validation. Error text contrast is 6.47:1.

Source (copy-ready)

<div class="dcl-field">
  <label for="dcl-field-email" class="dcl-field__label">Email address</label>
  <input type="email" id="dcl-field-email" name="email" class="dcl-field__input" required aria-describedby="dcl-field-email-error" aria-invalid="true">
  <p id="dcl-field-email-error" class="dcl-field__error" role="alert">Enter a valid email address, such as name@example.com.</p>
</div>
<style>
.dcl-field { display: flex; flex-direction: column; gap: 0.35rem; max-width: 20rem; font: inherit; }
.dcl-field__label { font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-field__input { padding: 0.5rem 0.65rem; border: 1px solid #94a3b8; border-radius: 6px; font: inherit; }
.dcl-field__input:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.dcl-field__error { margin: 0; font-size: 0.85rem; color: #b91c1c; background-color: #ffffff; }
</style>