
<p>WIP &#8211; ATM: As part of the label add<br>&#8211; If one option is required &#8220;(select one or more options that apply)&#8221; (substitute one for two, etc.)<br>&#8211; Else &#8220;(select all that apply)&#8221;</p>


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group\&quot; id=\&quot;change-checkbox-example-1\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-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-1-yes\&quot; name=\&quot;checkbox-example-1-ye\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-1-yes\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-1-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;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce10bc9682&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group\&quot; id=\&quot;change-checkbox-example-2\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-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-2a-suspect-1\&quot; name=\&quot;checkbox-example-2a-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-2a-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-2a-suspect-2\&quot; name=\&quot;checkbox-example-2a-suspect-2\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-2-suspect-2\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-2a-suspect-2\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce10bc96ef&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group\&quot; id=\&quot;change-checkbox-example-3\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-form__label\&quot;&gt;Select suspects relevant to witness (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;asp-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-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-completed\&quot; name=\&quot;checkbox-example-3-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-3-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-3-completed\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce10bc974c&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group asp-form__group&#8211;error\&quot; id=\&quot;change-checkbox-example-4\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-form__label\&quot;&gt;Select suspects relevant to witness (select one or more options that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;asp-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;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce10bc9810&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group asp-form__group&#8211;error\&quot; id=\&quot;change-checkbox-example-5\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-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;asp-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-5-suspect-1\&quot; name=\&quot;checkbox-example-5-suspect-1\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-5-suspect-1\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-5-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-5-suspect-2\&quot; name=\&quot;checkbox-example-5-suspect-2\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-5-suspect-2\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-5-suspect-2\&quot;&gt;Suspect 2&lt;/label&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;667011e73c714&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group\&quot; id=\&quot;change-checkbox-example-6\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-form__label\&quot;&gt;Was THRIVE assessment: (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;asp-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-example-6-required\&quot; name=\&quot;checkbox-example-6-required\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-6-required\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-6-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-example-6-completed\&quot; name=\&quot;checkbox-example-6-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-6-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-6-completed\&quot;&gt;Completed&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent=\&quot;checkbox-example-6-completed\&quot; data-child-required&gt;<br />
    &lt;div class=\&quot;asp-form__group\&quot; id=\&quot;checkbox-example-6-child\&quot;&gt;<br />
      &lt;label class=\&quot;asp-form__label\&quot; for=\&quot;checkbox-example-6-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-example-6-text-input\&quot; type=\&quot;text\&quot;&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;668d08f5703f0&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group\&quot; id=\&quot;change-checkbox-example-7\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-form__label\&quot;&gt;Was THRIVE assessment: (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;asp-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-example-7-required\&quot; name=\&quot;checkbox-example-7-required\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-7-required\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-7-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-example-7-completed\&quot; name=\&quot;checkbox-example-7-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-7-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-7-completed\&quot;&gt;Completed&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent=\&quot;checkbox-example-7-required,checkbox-example-7-completed\&quot;&gt;<br />
    &lt;div class=\&quot;asp-form__group\&quot; id=\&quot;checkbox-example-7-child\&quot;&gt;<br />
      &lt;label class=\&quot;asp-form__label\&quot; for=\&quot;checkbox-example-7-textarea\&quot;&gt;Reason (optional)&lt;/label&gt;<br />
      &lt;textarea class=\&quot;form__textarea\&quot; id=\&quot;checkbox-example-7-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-example-7-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;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;668d08f570455&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;fieldset class=\&quot;asp-form__group\&quot; id=\&quot;change-checkbox-example-8\&quot;&gt;<br />
  &lt;legend class=\&quot;asp-form__label\&quot;&gt;Was THRIVE assessment: (select all that apply)&lt;/legend&gt;<br />
  &lt;p class=\&quot;asp-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-example-8-required\&quot; name=\&quot;checkbox-example-8-required\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-8-required\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-8-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-example-8-completed\&quot; name=\&quot;checkbox-example-8-completed\&quot; type=\&quot;checkbox\&quot; value=\&quot;checkbox-example-8-completed\&quot;&gt;<br />
    &lt;label class=\&quot;form__label-choices\&quot; for=\&quot;checkbox-example-8-completed\&quot;&gt;Completed&lt;/label&gt;<br />
  &lt;/div&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent=\&quot;checkbox-example-8-completed\&quot;&gt;<br />
    &lt;div class=\&quot;asp-form__group\&quot; id=\&quot;checkbox-example-8-child\&quot;&gt;<br />
      &lt;label class=\&quot;asp-form__label\&quot; for=\&quot;checkbox-example-8-select\&quot;&gt;Reason (optional)&lt;/label&gt;<br />
      &lt;select class=\&quot;form__input\&quot; id=\&quot;checkbox-example-8-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;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;668e9c976ede9&quot; }) }}


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


<p>WIP &#8211; For no JS fallback (on conditional content):<br>&#8211; the conditional content will show (by default)<br>&#8211; add in noscript text to the label (required if &#8220;Question [parent Label]&#8221; is &#8220;Option to reveal conditional content&#8221;) &#8211; which can be multiple options/checkboxes</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>