Append CSS class to form field

Question

Once a field has been rendered {{ field|add_class }} how can you add additional classes? For example, let's say you want to build a variable and simply apply that. See the example below.

If field.type = Select CSSSTYLES += 'form-select'

If field.error CSSSTYLES += 'error'

{{ field|append_attr:"class:CSSSTYLES" }}

<form class="mt-3" method="POST" action="{% url 'profile' %}" autocomplete="off" novalidate>
  {% csrf_token %}

  {% for hidden in form.hidden_fields %}
  {{ hidden }}
  {% endfor %}

  {% for field in form.visible_fields %}

  <div class="mb-3">
    <label class="form-label" id="{{ field.id_for_label }}">
      {{ field.label }}
    </label>
    {% if field.errors %}
      {{ field|append_attr:"class:form-control is-invalid is-invalid-lite" }}
    {% for error in field.errors %}
    <div class="alert alert-danger">
      <strong>{{ error|escape }}</strong>
    </div>
    {% endfor %}
    {% else %}
      {{ field|append_attr:"class:form-control" }}
    {% endif %}

  {% endfor %}

Answer 1

{% for field in form.visible_fields %}

<div class="mb-3">
  <label class="form-label" id="{{ field.id_for_label }}">
    {{ field.label }}
  </label>
  {% if field.errors %}
    {% if field.field.widget.input_type == 'select' %}
      {{ field|add_class:"form-select is-invalid is-invalid-lite" }}
    {% else %}
      {{ field|add_class:"form-control is-invalid is-invalid-lite" }}
    {% endif %}
  {% for error in field.errors %}
  <div class="alert alert-danger">
    <strong>{{ error|escape }}</strong>
  </div>
  {% endfor %}
  {% else %}
    {% if field.field.widget.input_type == 'select' %}
      {{ field|append_attr:"class:form-select" }}
    {% else %}
      {{ field|append_attr:"class:form-control" }}
    {% endif %}
  {% endif %}

{% endfor %}