Image wells

Design image wells for a product form or content editor. Each well should accept one image, show a strong empty state, and make the add/replace action obvious. Treat the component as a repeated pattern, not a one-off gallery.

Show the full set of states: empty, filled, hover, focus, uploading, and error. Keep the same footprint across states so the form stays stable. If an image is already set, make replacement and removal available without hiding the preview.

Use a layout that works for one well or many: consistent crop, clear spacing, and a visible label or helper text when the image has a specific purpose. If the design supports multiple wells, make it easy to scan which slots are complete, which are missing, and which need attention.

Design for practical editing. If a user drags an image over the control, the drop target should be obvious. If upload fails, keep the selected file context and show the next step in place.

Infuse your image wells with a sprinkle of interactive elements, like subtle animations upon hover or selection, to delight users and enhance engagement.