Read only inputs versus pre-formatted text for instance SIDs

[andioneto]

Hi team 👋 I recently got feedback from a PM that she thought using a read-only input to render an instance SID would confuse uses as there is a BND visually that it is not editable.
I am pushing back gently on this, as I think there are tangible benefits to using an input.
My main reason for this is that the input provides a simple and repeatable way to focus on the element both through keyboard navigation and mouse navigation. It's very conceivable that a user would want to copy the static SID.

I spun up this code sandbox to demo two options as I see them.

I added a button with the copy icon to both renders as well. Would love some feedback on this!

[aayushpi]

Thanks for posting a discussion @andipants12. This is an excellent opportunity to consult with the two product designers attached to your team: they'll be able to balance the needs of your PM and using the design system correctly, and can help answer concerns about the impact of a component for users with testing. Feel free to DM the team, and we can intro you to them.

As for the sandbox, both of your options are perfectly valid UI choices. Since SIDs are immutable, I would prefer option 2.

[andioneto]

Ok cool, thank you! I already reached out to our designers. I'll let you know if I have any more questions.

[aayushpi]

Quick note: If space is not a concern, I would compose the copy button with text that says "Copy". That will remove the need for a tooltip.

If space is a concern, please consider using Screen Reader Only to add clarifying text about the action of the button.