select add required, name and showError

components/mdc/Select/Select.svelte

@@ -15,6 +15,12 @@ export let width = '280px'
 export let disabled = false
 /** @type {string} The ID of the selected option. */
 export let selectedID = ''
+/** @type {boolean} makes a selection required and adds invalid class when none selected */
+export let required = false
+/** @type {boolean} applies the mdc-select--invalid class */
+export let showError = false
+/** @type {string} a name for the hidden input field for form submission*/
+export let name = ''
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -61,13 +67,32 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
-  <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
+<div
+  class="mdc-select mdc-select--outlined {$$props.class || ''}"
+  class:mdc-select--required={required}
+  class:mdc-select--invalid={showError}
+  bind:this={element}
+  style="width: {width}"
+>
+  <input {required} type="hidden" {name} />
+  <div
+    class="mdc-select__anchor"
+    aria-required={required}
+    aria-haspopup="listbox"
+    aria-labelledby="{labelID} {selectedTextID}"
+  >
+    <span class="mdc-notched-outline">
+      <span class="mdc-notched-outline__leading" />
+      <span class="mdc-notched-outline__notch">
+        <span id={labelID} class="mdc-floating-label">{label}</span>
+      </span>
+      <span class="mdc-notched-outline__trailing" />
+    </span>
     <span class="mdc-select__selected-text-container">
       <span id={selectedTextID} class="mdc-select__selected-text" />
     </span>
     <span class="mdc-select__dropdown-icon">
-      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
+      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5" focusable="false">
         <polygon
           class="mdc-select__dropdown-icon-inactive"
           stroke="none"
@@ -77,17 +102,10 @@ afterUpdate(() => {
         <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15" />
       </svg>
     </span>
-    <span class="mdc-notched-outline">
-      <span class="mdc-notched-outline__leading" />
-      <span class="mdc-notched-outline__notch">
-        <span id={labelID} class="mdc-floating-label">{label}</span>
-      </span>
-      <span class="mdc-notched-outline__trailing" />
-    </span>
   </div>
 
-  <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}" role="listbox">
-    <ul class="mdc-deprecated-list">
+  <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
+    <ul class="mdc-deprecated-list" role="listbox" aria-label={label + ' picker listbox'}>
       {#each options as { id, name } (id)}
         <li class="mdc-deprecated-list-item" data-value={id} role="option" aria-selected={isOptionSelected(id)}>
           <span class="mdc-deprecated-list-item__text">{name}</span>

components/mdc/Select/_index.scss

@@ -4,6 +4,6 @@
 @use '@material/select/styles';
 
 /* MDC select floating label */
-.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
+.mdc-select:not(.mdc-select--disabled, .mdc-select--invalid).mdc-select--focused .mdc-floating-label {
   color: var(--mdc-theme-primary);
 }

index.d.ts

@@ -235,11 +235,14 @@ declare module '@silintl/ui-components' {
   }
 
   interface SelectProps {
+    disabled?: boolean
     label?: string
+    name?: string
     options?: { name: string; id: string }[]
-    width?: string
-    disabled?: boolean
+    required?: boolean
+    showError?: boolean
     selectedID?: string
+    width?: string
     class?: string
   }
   export class Select extends SvelteComponentTyped<SelectProps> {}

stories/Select.stories.svelte

@@ -1,7 +1,8 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { Select } from '../components/mdc'
+import { Button, Select, Snackbar, setNotice } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
+import { Form } from '../components/custom'
 
 const args = {
   options: [
@@ -21,13 +22,28 @@ const args = {
 <Meta title="Atoms/Select" component={Select} />
 
 <Template let:args>
-  <Select {...args} on:change={args['on:change']} on:populated={args['on:populated']} />
+  <Form on:submit={(e) => setNotice('submitted')}>
+    <p>
+      <Select {...args} on:change={args['on:change']} on:populated={args['on:populated']} />
+    </p>
+    <Button raised>Submit</Button>
+  </Form>
+
+  <Snackbar />
 </Template>
 
 <Story name="Default" {args} />
 
+<Story name="selectedID" args={copyAndModifyArgs(args, { selectedID: '5' })} />
+
 <Story name="Label" args={copyAndModifyArgs(args, { label: 'Label' })} />
 
 <Story name="Width" args={copyAndModifyArgs(args, { width: '560px' })} />
 
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
+
+<Story name="required" args={copyAndModifyArgs(args, { required: true })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="name" args={copyAndModifyArgs(args, { name: 'category' })} />