Tabs element: how to format selected header?

Hello,
I’m using the Tab element. It works fine but I didn’t manage to format the selected header text.
I tried a workflow setting a variable (header selected) which changes the color of the header to blue when clicking on the header. But if I click on another header (Edit vendor), the previous one (Search vendor) is still blue:

image

How can I achieve what I want?

image

There is a default ‘active’ state on the tab header, you can use it to style the active version of the element

If you don’t have one, you can simply create one and name it ‘active’(lowercase) for it to work

Hi Luka,
Thank you for this quick and (theoretically) helpful reply! My header has an “active” state but how can I use it in a formula (e.g. for making the tab header label bold or change its color?
I studied this page: States | WeWeb documentation
but I don’t know what to enter into Condition, Display, and Color (color might be a fixed value, like #BFBFBF). And how can I make the header (label) bold? I probably have to select the label and since I apply the state to children I should be able changing the font to bold.
Could you please tell me what to enter for the relevant properties in order to achieve the desired result? Thank you.

I found the answer! The WeWeb documentation was “wrong”; I should not set a Condition. Now I can change the background nof the header and the font weight of the label. Perfect!
Of course it would be nicer if there was a general setting for the Tabs element. Right now one has to configure each header.

Yes, we’re aware of the limitation and will try to fix it ASAP.

Yes, you don’t need to do any conditionals, just select the state and style it accordingly