How to conditionally add attributes in Thymeleaf

Thymeleaf is a popular server-side template engine for building web and standalone applications in Java. In this quick article, you'll learn how to conditionally add boolean attributes like checked, selected, and more to input elements in Thymeleaf templates.

Boolean Attributes in HTML

Boolean attributes in HTML are the one which do not have any value. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. The following example shows a checkbox that is checked and disabled. The checked and disabled attributes are the boolean attributes:

<label><input type="checkbox" name="suspend" checked disabled> Suspend User</label>

Note that boolean attributes cannot have values like checked="true" or checked="false". The browser will still interpret it as true based on the mere presence of the attribute name. If you want to represent a false value, you have to completely omit the attribute from the element.

Using Boolean Attributes in Thymeleaf

Fortunately, Thymeleaf standard dialect includes attributes that allow us to conditionally add fixed-value boolean attributes to HTML elements. Thymeleaf engine will only include the boolean attribute in rendered HTML if the specified condition evaluates to boolean true. If the condition evaluates to false, the attribute will be left out.

Let us first define a simple model class named User.java before we look at boolean attributes examples in Thymeleaf:

User.java

public class User implements Serializable {

    private long id;
    private String name;
    private String gender;
    private String active;
    
    // constructor, getters, and setters removed for brevity
}

Using th:checked Attribute

The th:checked attribute in Thymeleaf is used to set the checked attribute for checkboxes in an HTML document. It accepts a boolean variable or an expression that evaluates to a boolean value.

Here is an example that set the checked attribute only if ${user.active} expression evaluates to true:

<label><input type="checkbox" name="active" th:checked="${user.active}"> Active</label>

Using th:selected Attribute

The th:selected attribute is used to pre-select an option from a drop-down list in HTML documents. It adds the selected boolean attribute to HTML <option> tag only if the specified expression evaluates to boolean true. The pre-selected option will appear first in the drop-down list when the page loads.

Here is an example that shows how to pre-select an option from a drop-down list using th:selected attribute:

<select name="gender" id="gender">
    <option value="">Select gender from the list</option>
    <option value="M" th:selected="${user.gender eq 'M'}">Male</option>
    <option value="F" th:selected="${user.gender eq 'F'}">Female</option>
</select>

Using th:disabled Attribute

The th:disabled attribute is used to add a disabled boolean attribute to HTML elements. It specifies that the element HTML should be disabled. A disabled HTML element is un-clickable and unusable. If the disabled element is an <input> element, it won't be submitted in the form.

Here is an example that disable the <input> element if the condition is true:

<input type="text" name="username" placeholder="Enter username" th:disabled="${!user.active}">

The disabled attribute can also be set to prevent a user from performing a certain action until some other conditions are met (like agree to terms of service, etc.). Here is another example that disabled the submit button on sign up form by default:

<form method="post" th:action="@{/register}">
    <input type="email" name="email" placeholder="Enter Email Address">
    <input type="password" name="password" placeholder="Enter Password">
    <label for="tos">
        <input type="checkbox" name="tos" id="tos"> Agree to our terms of service
    </label>
    <button type="submit" th:disabled="${user.id eq 0}">Create Account</button>
</form>

In the above example, you may want to listen for a JavaScript event when the user clicks on the checkbox and then make the button usable again if it is checked.

Conclusion

That's all folks! In this quick article, we discussed how to conditionally add HTML boolean attributes in Thymeleaf templates. Thymeleaf engine evaluates the specified condition and only set the boolean attribute if the result is true; otherwise, it is omitted from the rendered HTML.

Check out the Thymeleaf documentation to learn more about all available boolean attributes.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.