
<h2 class="wp-block-heading">Single checkbox</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group\&quot; id=\&quot;checkbox-example-single\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Confirmation&lt;/legend&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-single-yes\&quot; name=\&quot;checkbox-example-single-ye\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-single-yes\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-single-yes\&quot;&gt;I confirm that I have read and understood the &lt;a href=\&quot;#\&quot;&gt;Privacy policy&lt;/a&gt; and &lt;a href=\&quot;#\&quot;&gt;Terms and Conditions&lt;/a&gt;&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;663ce10bc9682&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Multiple checkboxes</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group\&quot; id=\&quot;checkbox-example-1\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Select suspects relevant to witness (select all that apply)&lt;/legend&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-1a-suspect-1\&quot; name=\&quot;checkbox-example-1a-suspect-1\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-1-suspect-1\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-1a-suspect-1\&quot;&gt;Suspect 1&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-1a-suspect-2\&quot; name=\&quot;checkbox-example-1a-suspect-2\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-1-suspect-2\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-1a-suspect-2\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;663ce10bc96ef&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Checkboxes with hint</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group\&quot; id=\&quot;checkbox-example-2\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Select suspects relevant to witness (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;The witness may not be the victim&lt;/p&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-2-suspect-1\&quot; name=\&quot;checkbox-example-2-suspect-1\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-2-suspect-1\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-2-suspect-1\&quot;&gt;Suspect 1&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-2-completed\&quot; name=\&quot;checkbox-example-2-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-2-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-2-completed\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;663ce10bc974c&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Checkboxes with error</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group form__group&#8211;error\&quot; id=\&quot;checkbox-example-3\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Select suspects relevant to witness (select one or more options that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;form__error-message\&quot;&gt;\&quot;Select suspects relevant to witness\&quot; is required&lt;/p&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-3-suspect-1\&quot; name=\&quot;checkbox-example-3-suspect-1\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-3-suspect-1\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-3-suspect-1\&quot;&gt;Suspect 1&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-3-suspect-2\&quot; name=\&quot;checkbox-example-3-suspect-2\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-3-suspect-2\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-3-suspect-2\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;663ce10bc9810&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Checkboxes with hint and submission error</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group form__group&#8211;error\&quot; id=\&quot;checkbox-example-4\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Select suspects relevant to witness (select one or more options that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;form__hint form__hint&#8211;error\&quot;&gt;The witness may not be the victim&lt;/p&gt;<br />
  &lt;p class=\&quot;form__error-message\&quot;&gt;\&quot;Select suspects relevant to witness\&quot; is required&lt;/p&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-4-suspect-1\&quot; name=\&quot;checkbox-example-4-suspect-1\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-4-suspect-1\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-4-suspect-1\&quot;&gt;Suspect 1&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-example-4-suspect-2\&quot; name=\&quot;checkbox-example-4-suspect-2\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-4-suspect-2\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-4-suspect-2\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;667011e73c714&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Single checkbox to show conditional required text input</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group\&quot; id=\&quot;checkbox-additional-example-1\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Was THRIVE assessment: (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Check \&quot;Completed\&quot; to show conditional required text input&lt;/p&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-additional-example-1-required\&quot; name=\&quot;checkbox-additional-example-1-required\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-additional-example-1-required\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-additional-example-1-required\&quot;&gt;Required&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-additional-example-1-completed\&quot; name=\&quot;checkbox-additional-example-1-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-additional-example-1-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-additional-example-1-completed\&quot;&gt;Completed&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent=\&quot;checkbox-additional-example-1-completed\&quot; data-child-required&gt;<br />
    &lt;div class=\&quot;form__group\&quot; id=\&quot;checkbox-additional-example-1-child\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;checkbox-additional-example-1-text-input\&quot;&gt;Reason &lt;noscript&gt;(required if \&quot;Was THRIVE assessment\&quot; is \&quot;Completed\&quot;)&lt;/noscript&gt;&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input\&quot; id=\&quot;checkbox-additional-example-1-text-input\&quot; type=\&quot;text\&quot;&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;668d08f5703f0&quot;, url: &quot;&quot; }) }}


<p>WIP &#8211; noscript text (required if &#8220;Question&#8221; is &#8220;Option to reveal conditional content&#8221;)</p>


<h2 class="wp-block-heading">Multiple checkboxes to show conditional optional textarea</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group\&quot; id=\&quot;checkbox-additional-example-2\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Was THRIVE assessment: (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Check both \&quot;Completed\&quot; and \&quot;Required\&quot; to show conditional optional textarea&lt;/p&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-additional-example-2-required\&quot; name=\&quot;checkbox-additional-example-2-required\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-additional-example-2-required\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-additional-example-2-required\&quot;&gt;Required&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-additional-example-2-completed\&quot; name=\&quot;checkbox-additional-example-2-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-additional-example-2-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-additional-example-2-completed\&quot;&gt;Completed&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent=\&quot;[&amp;quot;checkbox-additional-example-2-completed&amp;quot;, &amp;quot;checkbox-additional-example-2-required&amp;quot;]\&quot;&gt;<br />
    &lt;div class=\&quot;form__group\&quot; id=\&quot;checkbox-additional-example-2-child\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;checkbox-additional-example-2-textarea\&quot;&gt;Reason (optional)&lt;/label&gt;<br />
      &lt;textarea class=\&quot;form__textarea\&quot; id=\&quot;checkbox-additional-example-2-textarea\&quot; name=\&quot;text-area\&quot; rows=\&quot;6\&quot; maxlength=\&quot;3000\&quot; data-countdown&gt;&lt;/textarea&gt;<br />
      &lt;p id=\&quot;checkbox-additional-example-2-textarea-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;668d08f570455&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Single checkbox to show conditional optional select</h2>


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;form__fieldset form__group\&quot; id=\&quot;checkbox-additional-example-3\&quot;&gt;<br />
  &lt;legend class=\&quot;form__label\&quot;&gt;Was THRIVE assessment: (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Check \&quot;Completed\&quot; to show conditional optional select&lt;/p&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-additional-example-3-required\&quot; name=\&quot;checkbox-additional-example-3-required\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-additional-example-3-required\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-additional-example-3-required\&quot;&gt;Required&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__item&#8211;choices\&quot;&gt;<br />
    &lt;input class=\&quot;form__input-choices form__input-choices&#8211;checkbox\&quot; id=\&quot;checkbox-additional-example-3-completed\&quot; name=\&quot;checkbox-additional-example-3-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-additional-example-3-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-additional-example-3-completed\&quot;&gt;Completed&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent-value=\&quot;checkbox-additional-example-3-completed\&quot;&gt;<br />
    &lt;div class=\&quot;form__group\&quot; id=\&quot;checkbox-additional-example-3-child\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;checkbox-additional-example-3-select\&quot;&gt;Reason (optional)&lt;/label&gt;<br />
      &lt;select class=\&quot;form__input\&quot; id=\&quot;checkbox-additional-example-3-select\&quot;&gt;<br />
        &lt;option&gt;Select Network&lt;/option&gt;<br />
        &lt;option value=\&quot;option-1\&quot; id=\&quot;option-1\&quot;&gt;Option 1&lt;/option&gt;<br />
        &lt;option value=\&quot;option-2\&quot; id=\&quot;option-2\&quot;&gt;Option 2&lt;/option&gt;<br />
      &lt;/select&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;668e9c976ede9&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">When to use this component</h2>


<p>WIP &#8211; When there are multiple selections.</p>


<h2 class="wp-block-heading">When not to use this component</h2>


<p>WIP &#8211; If a user has the option to select only one option; use radios if there is 7 or less options, use a select if there is 8 or more options.</p>


<h2 class="wp-block-heading">Other variants</h2>


<p>See Radios for conditional text input / select / textarea options. Also hint and errors within conditional content</p>