I'm working on trying to make a textarea read-only. Its meant to display a log on screen that I don't want users to be able to add or delete to. If i set enabled on the control to false, it grays the whole thing out and makes it hard to read. I want to maintain the existing style of it for visualization purposes. How can I achieve this? Thanks
Use a label and not a text area. Labels allow multiple lines and are read-only by design.
If you do want it still for some reason, you can add this to its styles:
pointerEvents: none
Note they won't be able to select the text with this either.
If you want the to be able to select the text but not edit, then you'll need to override the disabled pseudoclass for the component. I can't guide you through that on my phone though
I'd use a label but if you want the text area so you can enable or disable it. Then try creating a style with this:
cursor: auto
color: var(--neutral-90)
backgroundColor: var(--input-bg)
You may need to tweak the colors, if you want it to be white then change the backgroundColor accordingly
You can force the style back to "normal" while leaving the component disabled.
Props.style:
{
"color": "var(--label)",
"background-color": "var(--input)",
"border": "var(--containerBorder)",
"cursor": "text"
}