Clear Text field Buttons

Published: February 19, 2022

Last Updated: February 20, 2022

See source on GitHub

Pattern Demos

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

Label containing text field

Label prior to text field

Right to left example

Readonly Field

Pattern Details

Pattern Markup
<label for=whatever>
  Name
</label>
<div>
  <custom-clear>
    <input id=whatever>
  </custom-clear>
</div>
Pattern Markup after the script runs
<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).

More reading

Well... some. I wrote a short post on my website about these clear buttons. You can go check that out or see the source on GitHub.