{{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;select-example-1\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-example-1-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;select class=\&quot;form__input\&quot; id=\&quot;select-example-1-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;select-example-1-placeholder\&quot;&gt;Select network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot; id=\&quot;select-example-1-ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot; id=\&quot;select-example-1-br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot; id=\&quot;select-example-1-me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot; id=\&quot;select-example-1-ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot; id=\&quot;select-example-1-sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot; id=\&quot;select-example-1-ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot; id=\&quot;select-example-1-ws\&quot;&gt;WS&lt;/option&gt;<br />
  &lt;/select&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce167c4caa&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;select-example-2\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-example-2-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Hint&lt;/p&gt;<br />
  &lt;select class=\&quot;form__input\&quot; id=\&quot;select-example-2-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;select-example-2-placeholder\&quot;&gt;Select Network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot; id=\&quot;select-example-2-ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot; id=\&quot;select-example-2-br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot; id=\&quot;select-example-2-me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot; id=\&quot;select-example-2-ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot; id=\&quot;select-example-2-sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot; id=\&quot;select-example-2-ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot; id=\&quot;select-example-2-ws\&quot;&gt;WS&lt;/option&gt;<br />
  &lt;/select&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce167c4d65&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group form__group&#8211;error\&quot; id=\&quot;select-example-3\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-example-3-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;p class=\&quot;form__error-message\&quot;&gt;\&quot;Network\&quot; is required&lt;/p&gt;<br />
  &lt;select class=\&quot;form__input form__input&#8211;error\&quot; id=\&quot;select-example-3-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;select-example-3-placeholder\&quot;&gt;Select Network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot; id=\&quot;select-example-3-ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot; id=\&quot;select-example-3-br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot; id=\&quot;select-example-3-me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot; id=\&quot;select-example-3-ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot; id=\&quot;select-example-3-sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot; id=\&quot;select-example-3-ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot; id=\&quot;select-example-3-ws\&quot;&gt;WS&lt;/option&gt;<br />
  &lt;/select&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;663ce167c4db3&quot; }) }}


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


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group form__group&#8211;error\&quot; id=\&quot;select-example-4\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-example-4-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint form__hint&#8211;error\&quot;&gt;Hint&lt;/p&gt;<br />
  &lt;p class=\&quot;form__error-message\&quot;&gt;\&quot;Network\&quot; is required&lt;/p&gt;<br />
  &lt;select class=\&quot;form__input form__input&#8211;error\&quot; id=\&quot;select-example-4-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;select-example-4-placeholder\&quot;&gt;Select Network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot; id=\&quot;select-example-4-ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot; id=\&quot;select-example-4-br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot; id=\&quot;select-example-4-me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot; id=\&quot;select-example-4-ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot; id=\&quot;select-example-4-sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot; id=\&quot;select-example-4-ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot; id=\&quot;select-example-4-ws\&quot;&gt;WS&lt;/option&gt;<br />
  &lt;/select&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;6670121deafd2&quot; }) }}


<h2 class="wp-block-heading">Select with conditional required text input</h2>



<p>WIP &#8211; When JavaScript is enabled, choosing a parent control option reveals related child fields. When JavaScript is disabled, those child fields are always shown instead, but indented so the relationship is still clear.</p>



<p>If a user fills in a child field without selecting its parent (something that can happen in a non‑JavaScript journey), the form should validate this on submission and explain that the parent choice is required. This keeps the behaviour consistent, prevents accidental or mismatched answers, and avoids confusion.</p>



<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;)</p>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;select-additional-example-1\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-additional-example-1-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Select \&quot;Other\&quot; to show conditional required text input&lt;/p&gt;<br />
  &lt;select class=\&quot;form__input\&quot; id=\&quot;select-additional-example-1-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;placeholder\&quot;&gt;Select Network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot;&gt;WS&lt;/option&gt;<br />
    &lt;option value=\&quot;other\&quot;&gt;Other&lt;/option&gt;<br />
  &lt;/select&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent-select-value=\&quot;other\&quot; data-child-required&gt;<br />
    &lt;div class=\&quot;form__group\&quot; id=\&quot;select-additional-example-1-child\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;select-additional-example-1-other\&quot;&gt;Location &lt;noscript&gt;(required if \&quot;Network\&quot; is \&quot;Other\&quot;)&lt;/noscript&gt;&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input\&quot; id=\&quot;select-additional-example-1-other\&quot; type=\&quot;text\&quot;&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;667a7643370c7&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">Select with conditional optional textarea</h2>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;select-additional-example-2\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-additional-example-2-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Select \&quot;Other\&quot; to show conditional optional textarea&lt;/p&gt;<br />
  &lt;select class=\&quot;form__input\&quot; id=\&quot;select-additional-example-2-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;placeholder\&quot;&gt;Select Network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot;&gt;WS&lt;/option&gt;<br />
    &lt;option value=\&quot;other\&quot;&gt;Other&lt;/option&gt;<br />
  &lt;/select&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent-select-value=\&quot;other\&quot;&gt;<br />
    &lt;div class=\&quot;form__group\&quot; id=\&quot;select-additional-example-2-child\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;select-additional-example-2-other\&quot;&gt;Describe location (optional)&lt;/label&gt;<br />
      &lt;textarea class=\&quot;form__textarea\&quot; id=\&quot;select-additional-example-2-other\&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;select-additional-example-2-other-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;668e7bdb7a393&quot; }) }}


<h2 class="wp-block-heading">Select with conditional optional textarea (experimental)</h2>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;select-additional-example-3\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;select-additional-example-3-select\&quot;&gt;Network&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Select \&quot;Other\&quot; to show conditional optional textarea&lt;/p&gt;<br />
  &lt;select class=\&quot;form__input\&quot; id=\&quot;select-additional-example-3-select\&quot;&gt;<br />
    &lt;option value=\&quot;select\&quot; id=\&quot;select-additional-example-3-placeholder\&quot;&gt;Select Network&lt;/option&gt;<br />
    &lt;option value=\&quot;ba\&quot; id=\&quot;select-additional-example-3-ba\&quot;&gt;BA&lt;/option&gt;<br />
    &lt;option value=\&quot;br\&quot; id=\&quot;select-additional-example-3-br\&quot;&gt;BR&lt;/option&gt;<br />
    &lt;option value=\&quot;me\&quot; id=\&quot;select-additional-example-3-me\&quot;&gt;ME&lt;/option&gt;<br />
    &lt;option value=\&quot;ns\&quot; id=\&quot;select-additional-example-3-ns\&quot;&gt;NS&lt;/option&gt;<br />
    &lt;option value=\&quot;sg\&quot; id=\&quot;select-additional-example-3-sg\&quot;&gt;SG&lt;/option&gt;<br />
    &lt;option value=\&quot;ss\&quot; id=\&quot;select-additional-example-3-ss\&quot;&gt;SS&lt;/option&gt;<br />
    &lt;option value=\&quot;ws\&quot; id=\&quot;select-additional-example-3-ws\&quot;&gt;WS&lt;/option&gt;<br />
    &lt;option value=\&quot;other\&quot; id=\&quot;select-additional-example-3-other\&quot;&gt;Other&lt;/option&gt;<br />
  &lt;/select&gt;<br />
  &lt;div class=\&quot;form__indent\&quot; data-parent=\&quot;select-additional-example-3-other\&quot;&gt;<br />
    &lt;div class=\&quot;form__group\&quot; id=\&quot;select-additional-example-3-child\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;select-additional-example-3-textarea\&quot;&gt;Describe location (optional)&lt;/label&gt;<br />
      &lt;textarea class=\&quot;form__textarea\&quot; id=\&quot;select-additional-example-3-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;select-additional-example-3-textarea-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
    &lt;/div&gt;<br />
  &lt;/div&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;668d4c0e2417d&quot; }) }}


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



<p>Use a select when there are 8 or more options and only one selection is allowed, based on Miller’s Law.</p>



<p>Exception: Use a select even in lists when the number of options are variable or unknown, may grow beyond 7, and supporting both patterns would add unnecessary code logic. This avoids inconsistent UI on the same question, keeping the experience consistent (Krug’s Law), and prevents accidental taps on mobile where long radio lists expose touch targets while scrolling.</p>



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



<p>WIP &#8211; Use radios if there is 7 or less options and only one available selection.</p>



<p>If a user has the option to select more than one option, use a check box group.</p>



<p>This component can be added within a conditional question.</p>



<h2 class="wp-block-heading">Technical notes</h2>



<p>WIP &#8212; The first option (used as a placeholder) should use &#8220;Select&#8221; and never be disabled</p>



<p>WIP &#8211; Do not use &#8220;disabled&#8221; attributes (usually for the first option, utilised as a placeholder). This causes the contrast on desktops on some browsers to have a weak contrast between background (light grey) and text (white) colours. Instead; remove disabled options and allow for user to input that option with error messaging as a fall back.</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>



<h2 class="wp-block-heading">Status of development</h2>



<p>The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.</p>


<br />
 {{ aspTable({<br />
  head: [<br />
    { text: &#039;Development criteria&#039;}, <br />
    { text: &#039;Status&#039;}<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.2 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.1 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;HTML / Nunjucks version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In Progress&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Figma version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;M365 versions&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Documentation&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />