Inline message

How to use it

Use for short, calm feedback tied to one field or section -- a username that is available, a setting that applies from next month. Keep it one sentence; it is not dismissible, so remove or update it when it stops being true. For errors use the form field's error state, and for page-level problems use the alert. Change the ids and the aria-describedby reference together when you copy it.

Accessibility

The message is a role="status" element placed directly under the field and linked to it with aria-describedby, so it is read as the field's description on focus and changes to it are announced politely without moving focus. Its meaning is carried by a leading word ("Available:", "Note:") as well as the aria-hidden icon and colour. The field has a visible <label for>, and focus shows a 2px #1d4ed8 outline. Success text #166534 on #f0fdf4 is 6.8:1 and info text #1e40af on #eff6ff is 8.0:1.

Source (copy-ready)

Copy code

<div class="dcl-inlinemsg">
  <label class="dcl-inlinemsg__label" for="dcl-inlinemsg-username">Username</label>
  <input class="dcl-inlinemsg__input" id="dcl-inlinemsg-username" name="username" type="text" value="river_otter" autocomplete="username" aria-describedby="dcl-inlinemsg-username-note dcl-inlinemsg-username-info">
  <p class="dcl-inlinemsg__msg dcl-inlinemsg__msg--success" id="dcl-inlinemsg-username-note" role="status">
    <svg class="dcl-inlinemsg__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M6.5 11.5L3 8l1.4-1.4 2.1 2.1 5.1-5.1L13 5z" fill="#166534"/></svg>
    <span class="dcl-inlinemsg__text"><strong>Available:</strong> river_otter is free to use.</span>
  </p>
  <p id="dcl-inlinemsg-username-info" class="dcl-inlinemsg__msg dcl-inlinemsg__msg--info">
    <svg class="dcl-inlinemsg__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><circle cx="8" cy="8" r="7" fill="#1e40af"/><rect x="7.1" y="7" width="1.8" height="5" fill="#ffffff"/><rect x="7.1" y="4" width="1.8" height="1.8" fill="#ffffff"/></svg>
    <span class="dcl-inlinemsg__text"><strong>Note:</strong> you can change your username once every 30 days.</span>
  </p>
</div>
<style>
.dcl-inlinemsg { max-width: 24rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-inlinemsg__label { display: block; margin-bottom: 0.25rem; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-inlinemsg__input { box-sizing: border-box; width: 100%; padding: 0.5rem 0.625rem; border: 1px solid #64748b; border-radius: 0.375rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-inlinemsg__input:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.dcl-inlinemsg__msg { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0.375rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; }
.dcl-inlinemsg__msg--success { color: #166534; background-color: #f0fdf4; }
.dcl-inlinemsg__msg--info { color: #1e40af; background-color: #eff6ff; }
.dcl-inlinemsg__icon { width: 1rem; height: 1rem; flex: none; margin-top: 0.125rem; }
.dcl-inlinemsg__text { min-width: 0; overflow-wrap: anywhere; }
</style>