2

Throughout our system we have different input-field types that have icons tied to them.

Examples:

  • Time field with a time icon - when clicking the icon it will fill in the current time.
  • Date Field with a calendar icon - clicking the calendar will bring up a calendar where the user can select a date.

Is there any best practices for how icons should display on read-only input-fields?

  • Should the icons be hidden? OR
  • Should they just have a disabled style?

Example with the icons with disabled style:

3

Favor disabling over hiding the icons.

A standard disabled <select> input still looks like a <select> input when disabled. This allows the user to expect a certain type of interaction from this element. The entry methods for common elements vary, and the styling helps the user predict which one is expected of them. The following (non-exhaustive) lists help to illustrate the differences in user expectations.

Primary input method: Click/tap

  • Select lists (usually)
  • Checkbox
  • Radio button
  • Button

Primary input method: Keyboard entry

  • Input fields

Seeing an element that looks like an input field, then watching it quickly transform into a <select> element when it becomes enabled would cause a user to have to briefly reprocess the elements to figure out how to interact with it.

So, following the pattern of the <select> item, I'd allow your custom inputs to show their distinct icons so that a user can have a shot at preprocessing them before they become enabled.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.