Delete value in a modal

Question

I have a page that contains a section that has a button for the user to assign a contact. This button will bring up a modal that has a field where the user can input the contact's name.

Adding a contact is not required, but in this modal, the field becomes required because we don't want the user submitting empty values from the modal.

But once the user has assigned a contact, what would be the best way to go about delete it?

In the mockup below, once the user hits delete, the assigned value will be deleted, and the modal will disappear.

We decided that for now, no deletion confirmation is needed.

Another idea is to add a delete button on the main page (inline with the saved value), but it might be too easy for the user to mistakenly click it.

Answer 1

It sounds like "Contact info" is just a free-text field, as opposed to a lookup reference to another record. In this case, I would suggest you change your logic and allow the user to submit an empty field.

This then essentially becomes the method for "removing the contact info". The user edits the field (modal shows), they empty the data they don't want, and then save it.

If you take this approach then you could consider changing the "Delete" button to be "Clear". Upon clicking it simple empties the text box, and the user can then "Save" to confirm.

---

Also, think about scenarios where your modal has multiple fields, and the user just wants to specify some of them. Your "Delete" approach will make this very difficult and confusing for the user. So it's best to rethink it now and ensure you apply the same logic throughout the application.

Answer 2

Since this is just one field, consider placing both the Edit and Delete functions inline in the main table; delete would clear the field. If deletion confirmation feels like it's getting in the way, you could support Undo with shortcut keys.