fix(Select): Add support for required attribute

src/components/Select/Select.stories.tsx

@@ -49,6 +49,12 @@ const meta: Meta<typeof Select> = {
         disable: true,
       },
     },
+
+    required: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 };
 
@@ -119,3 +125,43 @@ export const SelectMultiple: Story = {
 
   name: "Select multiple",
 };
+
+export const RequiredSelect: Story = {
+  args: {
+    required: true,
+  },
+
+  render: (args) => (
+    <form>
+      <Select
+        name="exampleSelectRequired"
+        id="exampleSelectRequired"
+        options={[
+          {
+            value: "",
+            disabled: true,
+            label: "Select an option",
+          },
+          {
+            value: "1",
+            label: "Cosmic Cuttlefish",
+          },
+          {
+            value: "2",
+            label: "Bionic Beaver",
+          },
+          {
+            value: "3",
+            label: "Xenial Xerus",
+          },
+        ]}
+        label="Ubuntu releases (required)"
+        required={args.required}
+        defaultValue=""
+      />
+      <button type="submit">Submit</button>
+    </form>
+  ),
+
+  name: "Select with required",
+};

src/components/Select/Select.test.tsx

@@ -15,7 +15,7 @@
           { value: "3", label: "Xenial Xerus" },
         ]}
         wrapperClassName="select"
-      />
+      />,
     );
     expect(screen.getByRole("combobox")).toMatchSnapshot();
   });
@@ -30,7 +30,7 @@
     render(<Select options={[]} onChange={onChangeMock} />);
     fireEvent.change(screen.getByRole("combobox"), event);
     expect(onChangeMock.mock.calls[0][0].target).toBe(
-      screen.getByRole("combobox")
+      screen.getByRole("combobox"),
     );
   });
 
@@ -63,4 +63,37 @@
     render(<Select help={help} />);
     expect(screen.getByRole("combobox")).toHaveAccessibleDescription(help);
   });
+
+  it("renders with required attribute", () => {
+    render(
+      <Select
+        id="test-required"
+        options={[
+          { value: "", disabled: true, label: "Select an option" },
+          { value: "1", label: "Cosmic Cuttlefish" },
+          { value: "2", label: "Bionic Beaver" },
+          { value: "3", label: "Xenial Xerus" },
+        ]}
+        required
+      />,
+    );
+    const select = screen.getByRole("combobox");
+    expect(select).toBeRequired();
+  });
+
+  it("renders without required attribute when not set", () => {
+    render(
+      <Select
+        id="test-not-required"
+        options={[
+          { value: "", disabled: true, label: "Select an option" },
+          { value: "1", label: "Cosmic Cuttlefish" },
+          { value: "2", label: "Bionic Beaver" },
+          { value: "3", label: "Xenial Xerus" },
+        ]}
+      />,
+    );
+    const select = screen.getByRole("combobox");
+    expect(select).not.toBeRequired();
+  });
 });

src/components/Select/Select.tsx

@@ -146,6 +146,7 @@ const Select = ({
         id={selectId}
         onChange={(evt) => onChange && onChange(evt)}
         ref={selectRef}
+        required={required}
         {...selectProps}
       >
         {generateOptions(options)}