Clear Text field Buttons

Pattern Demos

The following examples are different ways to markup a text field and provide it a button to clear a user's entry.

Right to left example

Example 3

Pattern Details

<label for=whatever>
  Name
</label>
<div>
  <custom-clear>
    <input id=whatever>
  </custom-clear>
</div>

<label for=whatever>
  Name
</label>
<div>
  <custom-clear>
    <input id=whatever>
    <span class="clr-btn" role="button" aria-label="clear entry" tabindex="-1" hidden>
      <span aria-hidden="true">×</span>
    </span>
  </custom-clear>
</div>

The <custom-clear> custom element serves as a wrapper for where the clear button will be injected. It must have the <input> as a descendant.

The <custom-clear> should not be a child of the <label> element. Doing so will cause the clear button's accessible name to be recognized by the <label> element, and thus become part of the text field's accessible name when the button is not in the hidden state.

The clear button will be visually positioned at the end of the text field. The text field has extra padding set (to the left or right side, depending on the left to right or right to left directionality of the page), where the positioned clear button can safely exist without overlapping content.

The clear button will appear on focus or hover of a text field so long as the text field has a non-empty value. On focus leaving or mouseout, the clear button will become hidden again.

Clicking or tapping the button will result in it being set to the hidden state, the text field's value becoming the empty string, and focus being placed into the text field.

The clear button is marked up as a <button> element with a tabindex=-1 and has an accessible name of "clear entry". This way if users of assistive technologies, such as screen readers, were to discover it, it would be exposed with a proper role and respond click or keypress events. Note: I originally was using a <span> with a role=button. However, Narrator was not properly activating the button when it had been navigated to in scan mode and Enter or Space were pressed. Other screen readers were working just fine with respecting synthetic clicks on the element.

The clear button is purposefully not in the tabbing order of the web page. Keyboard users can use the Delete or Backspace keys (or first select all the text field's text and then use these keys) to delete the contents of the text field.

Important: if the clear button was part of the web page's tabbing order, every text field a user had entered data into would then require that they tab past the clear button that they have no use for. This clear button being useless to them if they had filled out the field with the data they intended. Adding clear buttons to the web page's tabbing order is not recommended for this reason, as it has the potential to require two keyboard focus stops for every text field on the page that has a clear button.

Text fields that are in a disabled or readonly state do not display a clear button on hover or focus (if focus is allowed).