# Style Class Element States, Required, Valid

**URL:** <https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 18, 2022, 8:38pm UTC](https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037 "2022-07-18T20:38:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ggcontrols](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@ggcontrols](https://forum.inductiveautomation.com/u/ggcontrols)\
**Post date:** [July 18, 2022, 8:38pm UTC](https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037/1 "2022-07-18T20:38:05Z")

</div>

I want components that responds to a users security level. If they are unauthenticated red background, no write permissions, and disabled. Looking into style classes / element states I found two that are undocumented. What do the “required” and “valid” states monitor? Any additional insight on this and styling on security would be helpful.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 18, 2022, 9:08pm UTC](https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037/2 "2022-07-18T21:08:41Z")

</div>

Two things before we start:

1. Style/theming is one aspect of your request.
2. Preventing interaction is something else.

The best option here is to have a Style Class for each possible state you expect a user could have. If we assume that you’ll only ever need either authenticated or not-authenticated, then we can continue as if no extra styling is “authenticated”, which means we only need to worry about not-authenticated. Let’s make a new Perspective Named Style named “RequiresAuth”.

**Styling:**  
Within the RequiresAuth named style, supply all of the appearance changes you want someone who is not authenticated to see.  
Bind `ComponentX.props.style.classes` with an expression binding: `if(len({session.props.auth.user.userName}) > 0, "", "RequiresAuth")`. Note that this expression is on `classes` - not `style`; also, if you already have classes attached to this component, you should supply those instead of the empty string.

**Permissions:**  
Every input component should have some sort of `enabled` property. You’ll want to bind this property against a similar expression: `len({session.props.auth.user.userName}) > 0`. Now, if a user is not logged in, they are unable to interact with the input.

---

<div class="post-metadata">

**Author:** ![ggcontrols](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@ggcontrols](https://forum.inductiveautomation.com/u/ggcontrols)\
**Post date:** [July 18, 2022, 9:31pm UTC](https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037/3 "2022-07-18T21:31:30Z")

</div>

**Styling**  
First, is there any benefit to using the ‘session.props.auth.user.username’ vs. ‘session.props.auth.authentiated’?  
Second, style classes can only be applied to components on a view. When does a “required” or “valid” element state play its part?

**Permissions**  
That makes sense.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 18, 2022, 10:06pm UTC](https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037/4 "2022-07-18T22:06:27Z")

</div>

> [@ggcontrols](#):
>
> First, is there any benefit to using the ‘session.props.auth.user.username’ vs. ‘session.props.auth.authentiated’?

Nope, I just forgot that property was there, and the example I pulled from was actually checking for usernames so it was an easy copy/paste.

> [@ggcontrols](#):
>
> When does a “required” or “valid” element state play its part?

These only come into play if you've configured the web element in the DOM to be required, or you've marked it as valid, neither of which is possible in Perspective short of incredibly niche and heavy-handed one off custom theming.

---

<div class="post-metadata">

**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:** [July 18, 2022, 10:25pm UTC](https://forum.inductiveautomation.com/t/style-class-element-states-required-valid/62037/5 "2022-07-18T22:25:11Z")

</div>

> [@ggcontrols](#):
>
> If they are unauthenticated red background, ...

No need for red background. Be subtle, man. Be subtle!

Most GUIs change disabled controls to light grey or some themed style with lower contrast than an enabled control. Red means "danger" and there _is_ no danger if the control is disabled. Good design will be consistent with what your users are used to on well designed websites. Use of color should be judicious, themed and consistent. Your users will appreciate the lower burden on their visual cortex and will soon learn to interpret the screen. You will also look more professional.