Whats the best way to make a label look like a textfield? I cant get the border and text to match. Anyone have any tips?
1 Like
Can we assume this is for Perspective module? If so, can you add that tag to your thread?
it's perspective, I've added the tag. thanks
More important question. Why?
CSS is the answer. You can inspect the styles to get a better match.
But what is the point? or do you simply like the text field border? If you are wanting to not have something editable you can just disable the ability to interact with the textField.
I want one to be editable and one not to be. I'm guessing I could disable entry on the textfield but I didn't want it to be selected during a tab too.
I want the looks to be the same for consistancy without the selection and entry.
You'll need to use padding to pull the text off the border. From memory textfield inputs are padded 10px from the sides.
Borders with slightly rounded corners (2-3px). You could use dev tools to inspect the textfield component to see what styles it uses and potentially even just use them.
border: var(--containerBorder)
color: var(--neutral-90)
backgroundColor: var(--input)
borderRadius: var(--borderRadiusInput)
padding: 0px 0.5rem
One is the textfield, one is just a label below...
Component JSON
[
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Hello",
"style": {
"border": "var(--containerBorder)",
"padding": "0px 0.5rem",
"fontSize": "0.875rem",
"backgroundColor": "var(--input)",
"borderRadius": "var(--borderRadiusInput)"
}
},
"meta": {
"name": "Label"
},
"position": {
"basis": "32px"
},
"custom": {}
}
]
5 Likes
That seems like a likely source for user confusion.
5 Likes
While I agree with you, you know how people click around and click everything.
They will click the non editable textfield and wonder why it cant be edited. I want it to look like the fields around it but they cant select it. It wont have the same white background, it will be a light gray.
Why not just use a disabled textfield then? Tabbing skips disabled textfields and they are already gray.
2 Likes
I'll try it out
Don't give them a reason to click around by making a label look like something that should be editable. Use correct GUI visual clues and they'll educate themselves eventually.
2 Likes
if it was a blank white screen they would be clicking around to see what happens.
To add to Transistors point.
When designing UI/UX you have to guide a user through the experience.
Example 1. High Performance HMI. This is a flexible standard, but the gist is making things as obvious as possible because operators are not always the savviest when it comes to technology. Don't hide options, gray them out. Provide obvious color changes for states like transitions, manual vs. auto, etc.
Example 2. Meaningful UI/UX for editing and viewing data. Don't just make a table with 1000 columns. Present data that can be consumed by a user. Make labels be labels and text fields be text fields. If you use mostly popup modals for editing things like names etc. Use that consistently.
I could go on all day about this, but overall, you should be thinking about it in the most simplistic mind you can. If I am an operator, will I be interested in trying to click something that I think should be editable based on its look or common sense? It will not likely be common sense. You run the risk of emails, phone calls and tickets by making things appear as they shouldn't. Don't give the opportunity for them to ask why this isn't editable when it looks like it should be. Give them a clear and concise UI/UX and they will put more emphasis on the items on the screen you put their attention to.
I did this before, we added a counter that when it hit 1000 a picture of a nuclear explosion appeared on the screen, our version of an Easter egg.
We estimated that it would take a week....
We got the screen in 2 hours.
5 Likes