Conditional formatting of components in form

[rjb2000]

I'm sure this is an easy one but couldn't find a clear answer, I'm trying to add some conditional formatting to certain components within the form component.

We have an app where staff input datapoints for our product catalogue and some boxes on the form are pre-filled with a GPT call

I simply want to add conditional formatting which highlights text inputs and selects on the form which are unfilled and therefore need attention.

This could be colouring the box, adding an outline etc. Anything really to highlight these boxes when they are unfilled.

Once they are filled the conditional formatting would go.

[Mitchel_Smith]

Hey RJB,

Sounds like a ternary in one of the styles is what you're looking for. If you select text input and look in the appearance section in the inspector, you can set it there.
Something like {{ textInput1.value ? 'black' : theme.danger }} in either the background or border should work for what you're describing

Without Input

With Input

[rjb2000]

Really helpful, didn't know that was possible!

For some reason mine wouldn't accept the CSS string but this worked:

{{ brand.value ? "" : "#dc2626" }}

Thanks!