Skip to main content
Kinetic Community

Adding Classes Dynamically to Fields or Labels

How to dynamically change the styles of a field or field label.

You may wish to adjust the style of a field, field label, or field element (input area) for an item based on input to another item, and while render elements can be used to changes the styles on a field, these are static. Jquery can be leveraged to apply a class, which can contain the desired styles. This can be a class from the existing CSS files in the theme or a class defined in the Custom Header content for the form.

Example class defined in Custom Header:

<style>
  .sampleClass{
    background-color: yellow;
  }
</style>

AdvHeaderStyle.jpg

Example of applying it to field "Sample Text" when "Sample Radio" is Yes.

Custom Change Event on Sample Radio:

if (K('field[Sample Radio]').value() == "Yes") {
    //Add class
    $("[data-element-name='Sample Text'] label").addClass("sampleClass");
} else {
    //remove class
    $("[data-element-name='Sample Text'] label").removeClass("sampleClass");
}

radio.JPG

To affect the whole field, it would look like this:

if (K('field[Sample Radio]').value() == "Yes") {
//Add class
$(K('field[Attachments]').wrapper()).addClass("sampleClass");
} else {
  $(K('field[Attachments]').wrapper()).removeClass("sampleClass");
}