You can set up a read-only input easily in HTML (or JSX in React) using the readonly
attribute.
In plain HTML:
<input type="text" value="This is read-only" readonly />
In React JSX:
<input type="text" value="This is read-only" readOnly />
👉 Notes:
-
The
readonly
(orreadOnly
in JSX) attribute prevents the user from editing the input value. -
The user can still focus and select the text.
-
It is different from
disabled
:readonly
: value is visible and selectable.disabled
: value is grayed out and not focusable.
If you tell me which framework you're using (HTML, React, Vue, etc.), I can give a more specific example. Would you like that? 🚀