
<p>WIP &#8212; The first option (used as a placeholder, even if not a valid value) should never be disabled</p>


 {{ 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;, title: &quot;&quot;, id: &quot;663ce167c4caa&quot;, url: &quot;&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;from__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;, title: &quot;&quot;, id: &quot;663ce167c4d65&quot;, url: &quot;&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;, title: &quot;&quot;, id: &quot;663ce167c4db3&quot;, url: &quot;&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;from__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;, title: &quot;&quot;, id: &quot;6670121deafd2&quot;, url: &quot;&quot; }) }}


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


 {{ 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;, title: &quot;&quot;, id: &quot;667a7643370c7&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">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;, title: &quot;&quot;, id: &quot;668e7bdb7a393&quot;, url: &quot;&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;, title: &quot;&quot;, id: &quot;668d4c0e2417d&quot;, url: &quot;&quot; }) }}


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


<p>WIP &#8211; When there are 8 or more options and only one available selection. This is based on Millers&#8217; Law (Ask JS).</p>


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


<p>WIP &#8211; Use radios if there is 6 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 &#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 />