What is the difference between disabled and readonly?

0-2 years experience

1. 1How would you make a text input that the user can see but not edit, and why would you choose readonly over disabled?
2. 2If you add the disabled attribute to a button inside a form, what happens when the form is submitted?
3. 3What visual differences do browsers typically show for disabled versus readonly fields?

2-5 years experience

1. 1You have a form where some fields should be submitted but not edited by the user. You used disabled, but the backend isn’t receiving those values. How would you fix it?
2. 2During a QA test, a user reports they can’t copy text from a readonly textarea. Explain why and how you’d address it.
3. 3Explain the impact of using disabled on form‑validation scripts that rely on input events.

5-8 years experience

1. 1Design a reusable component library for forms that needs to support both disabled and readonly states while maintaining accessibility standards. What considerations guide your implementation?
2. 2In a large SPA you notice that toggling disabled on many inputs causes UI lag. What could be causing this and how would you mitigate it?
3. 3How would you ensure that server‑side rendering of forms correctly reflects disabled vs readonly states across browsers and assistive technologies?

8+ years experience

1. 1Your organization is migrating a legacy monolithic web app to a micro‑frontend architecture. How would you standardize handling of disabled vs readonly across teams to avoid inconsistencies and maintain accessibility compliance?
2. 2When defining a design system, what guidelines would you set for when to use disabled versus readonly, and how would you enforce them across multiple product lines?
3. 3Consider a regulatory requirement that certain fields must never be edited after submission but must be auditable. How would you architect the front‑end and back‑end to enforce this using disabled/readonly or alternative patterns?