# Best way to make a label look like textfield **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [March 14, 2025, 1:01am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670 "2025-03-14T01:01:04Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 1:01am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/1 "2025-03-14T01:01:04Z")
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? ---
**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\ **Post date:** [March 14, 2025, 1:14am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/2 "2025-03-14T01:14:48Z")
Can we assume this is for Perspective module? If so, can you add that tag to your thread? ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 1:18am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/3 "2025-03-14T01:18:56Z")
it's perspective, I've added the tag. thanks ---
**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\ **Post date:** [March 14, 2025, 1:52am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/4 "2025-03-14T01:52:20Z")
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. ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 2:03am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/5 "2025-03-14T02:03:13Z")
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. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 14, 2025, 8:10am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/6 "2025-03-14T08:10:46Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9aa171fb7c280df5b95b416114c6f68283eecb7b.png) ```python 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... ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/dfe4acb607e72e9c365a0410ba5edd7ef5612bc6.png) > **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": {} > } > ] ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 14, 2025, 8:57am UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/7 "2025-03-14T08:57:25Z")
> [@drewdin](#): > > I want the looks to be the same for consistancy That seems like a likely source for user confusion. ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 1:26pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/8 "2025-03-14T13:26:47Z")
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. ---
**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\ **Post date:** [March 14, 2025, 1:30pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/9 "2025-03-14T13:30:21Z")
Why not just use a disabled textfield then? Tabbing skips disabled textfields and they are already gray. ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 1:32pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/10 "2025-03-14T13:32:18Z")
I'll try it out ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 14, 2025, 3:18pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/11 "2025-03-14T15:18:00Z")
> [@drewdin](#): > > ... you know how people click around and click everything. 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. ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 3:30pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/12 "2025-03-14T15:30:20Z")
if it was a blank white screen they would be clicking around to see what happens. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 14, 2025, 3:49pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/13 "2025-03-14T15:49:31Z")
Could you add an onClick event to the view to trigger a popup? ![Useless click counter](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/674a84950819aaeadf101dae8849bfdda9f75026.png) ---
**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\ **Post date:** [March 14, 2025, 3:56pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/14 "2025-03-14T15:56:52Z")
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. ---
**Author:** ![drewdin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drewdin/32/3363_2.png) [@drewdin](https://forum.inductiveautomation.com/u/drewdin)\ **Post date:** [March 14, 2025, 4:07pm UTC](https://forum.inductiveautomation.com/t/best-way-to-make-a-label-look-like-textfield/103670/15 "2025-03-14T16:07:38Z")
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.