Skip to content

Template Tags Reference

Load with:

{% load reactive_forms %}

{% reactive_signals form %}

Generates JSON for data-signals attribute:

<form data-signals='{% reactive_signals form %}'>

Output:

<form data-signals='{"order_type": "", "quantity": 1, "price": "10.00"}'>

{% render_reactive_form form %}

Renders a complete form with all fields, signals, and a submit button:

{% render_reactive_form form %}
{% render_reactive_form form submit_label="Save Order" %}

Uses the rg_forms/form.html template.

{% render_reactive_field bound_field %}

Renders a single field with its label, input, errors, and reactive attributes:

{% render_reactive_field form.order_type %}
{% render_reactive_field form.priority label="Custom Label" %}

Uses the rg_forms/field.html template. Generates:

  • Wrapper <div> with data-show if visible_when is set
  • <label> with required indicator
  • Input with data-bind, data-computed as needed
  • Error messages
  • Help text (static and dynamic help_text_when)

{% render_field_group form group_name %}

Renders a field group with its header, description, and all fields:

{% render_field_group form "personal" %}
{% render_field_group form "business" %}

Uses the rg_forms/field_group.html template. Generates:

  • Group container with data-show if the group has visible_when
  • Group label as heading
  • Group description
  • All fields in the group via {% render_reactive_field %}

{% reactive_wrapper_attrs bound_field %}

Generates wrapper div attributes (for manual rendering):

<div class="field" {% reactive_wrapper_attrs form.priority %}>
    ...
</div>

Output:

<div class="field" data-show="$order_type == 'urgent'">

{% reactive_input_attrs bound_field %}

Generates input element attributes (for manual rendering):

<input type="text" {% reactive_input_attrs form.quantity %}>

Output:

<input type="text" data-bind:quantity>

For computed fields:

<input type="text" data-bind:total data-computed="$quantity * $price" readonly>

{% required_indicator bound_field %}

Generates a required indicator (*) that respects required_when:

<label>{{ form.email.label }} {% required_indicator form.email %}</label>
  • Static required: <span class="has-text-danger">*</span>
  • Dynamic required: <span class="has-text-danger" data-show="$method == 'email'">*</span>
  • Not required: empty string

{{ field_name|signal_name }}

Filter that converts a field name to a Datastar signal reference:

{{ "my_field"|signal_name }}

Output: $my_field