Use checkboxes to present a list of options, where a user can choose any number. Radio buttons are like checkboxes, but users can only pick 1 option.
These are fields that depend on a checkbox being selected before they are valid. Set the `data-field` attribute to the ID of the field that it depends on. By default, if the field is set, then we automatically check the dependent checkbox. If the checkbox is unchecked, then we clear the field.
{% load forms %}
{% render_field dependent_cb_form.import_subtitles %}
<div class="dependentField" data-field="{{ dependent_cb_form.import_subtitles.auto_id }}">
{% render_field dependent_cb_form.import_asr_subtitles %}
</div>
Alternatively add the `disableWhenUnchecked` class to disable the field when the checkbox is not checked.
{% load forms %}
{% render_field dependent_cb_form2.import_subtitles %}
<div class="dependentField disableWhenUnchecked" data-field="{{ dependent_cb_form2.import_subtitles.auto_id }}">
{% render_field dependent_cb_form2.import_asr_subtitles %}
</div>
Use the radio tag to handle more complex radios. These can
have content that corresponds to each choice.
The radio tag inputs the radio field from the form. Use the
radio-item-content/end-radio-item-content tags to
define the extra content. Use end-radio to finish. You can use
on of the following CSS classes for the content:
.radioItem-help for help text.radioItem-subField for a field corresponding to the radio option. This field will be disabled when the radio is not selected
{% load forms %}
{% radio form.payment %}
{% radio-item-content "existing" %}
<div class="radioItem-help"><p>Use the card you have on file</p></div>
{% end-radio-item-content %}
{% radio-item-content "new"%}
<div class="radioItem-subfield">{% render_field form.new_card %}</div>
{% end-radio-item-content %}
{% end-radio %}
Use the card you have on file