# How to conditionally add attributes in Thymeleaf

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jan 23, 2020. Topics: Thymeleaf.
Canonical URL: https://attacomsian.com/blog/thymeleaf-conditionally-add-attributes

> A quick article to learn how to conditionally add boolean attributes like checked and selected in Thymeleaf.

[Thymeleaf](https://attacomsian.com/blog/spring-boot-thymeleaf-example) 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](https://html.spec.whatwg.org/multipage/common-microsyntaxes.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:

```markup
<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](https://attacomsian.com/blog/thymeleaf-conditions) 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:

<p class="file-desc"><span>User.java</span></p>

```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:

```markup
<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:

```markup
<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:

```markup
<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:

```markup
<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](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#fixed-value-boolean-attributes) to learn more about all available boolean attributes.