feat(Radio): enable support for form-associated

packages/beeq/src/components.d.ts

@@ -1749,6 +1749,7 @@ export namespace Components {
      * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
      * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
      * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood
+     * @method getNativeInput - Returns the native `<input>` HTML element used under the hood
      * @event bqBlur - Handler to be called when the radio loses focus
      * @event bqClick - Handler to be called when the radio state changes
      * @event bqFocus - Handler to be called when the radio gets focused
@@ -1773,6 +1774,10 @@ export namespace Components {
           * The form ID that the radio input is associated with
          */
         "formId"?: string;
+        /**
+          * Returns the native `<input>` HTML element used under the hood.
+         */
+        "getNativeInput": () => Promise<HTMLInputElement>;
         /**
           * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
          */
@@ -1817,6 +1822,8 @@ export namespace Components {
      * @attr {boolean} fieldset - If `true` displays fieldset
      * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair
      * @attr {"horizontal" | "vertical"} orientation - The display orientation of the radio inputs
+     * @attr {boolean} required - If `true`, the radio group is required
+     * @attr {string} required-validation-message - The native form validation message when the radio group is required
      * @attr {string} value - The display orientation of the radio inputs
      * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
      * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
@@ -1847,7 +1854,15 @@ export namespace Components {
         /**
           * The display orientation of the radio inputs
          */
-        "orientation": TRadioGroupOrientation;
+        "orientation"?: TRadioGroupOrientation;
+        /**
+          * If true, the radio group is required
+         */
+        "required"?: boolean;
+        /**
+          * The native form validation message when the radio group is required
+         */
+        "requiredValidationMessage"?: string;
         /**
           * A string representing the value of the radio.
          */
@@ -4253,6 +4268,7 @@ declare global {
      * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
      * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
      * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood
+     * @method getNativeInput - Returns the native `<input>` HTML element used under the hood
      * @event bqBlur - Handler to be called when the radio loses focus
      * @event bqClick - Handler to be called when the radio state changes
      * @event bqFocus - Handler to be called when the radio gets focused
@@ -4296,6 +4312,8 @@ declare global {
      * @attr {boolean} fieldset - If `true` displays fieldset
      * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair
      * @attr {"horizontal" | "vertical"} orientation - The display orientation of the radio inputs
+     * @attr {boolean} required - If `true`, the radio group is required
+     * @attr {string} required-validation-message - The native form validation message when the radio group is required
      * @attr {string} value - The display orientation of the radio inputs
      * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
      * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
@@ -6920,6 +6938,7 @@ declare namespace LocalJSX {
      * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
      * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
      * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood
+     * @method getNativeInput - Returns the native `<input>` HTML element used under the hood
      * @event bqBlur - Handler to be called when the radio loses focus
      * @event bqClick - Handler to be called when the radio state changes
      * @event bqFocus - Handler to be called when the radio gets focused
@@ -6992,6 +7011,8 @@ declare namespace LocalJSX {
      * @attr {boolean} fieldset - If `true` displays fieldset
      * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair
      * @attr {"horizontal" | "vertical"} orientation - The display orientation of the radio inputs
+     * @attr {boolean} required - If `true`, the radio group is required
+     * @attr {string} required-validation-message - The native form validation message when the radio group is required
      * @attr {string} value - The display orientation of the radio inputs
      * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
      * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
@@ -7027,6 +7048,14 @@ declare namespace LocalJSX {
           * The display orientation of the radio inputs
          */
         "orientation"?: TRadioGroupOrientation;
+        /**
+          * If true, the radio group is required
+         */
+        "required"?: boolean;
+        /**
+          * The native form validation message when the radio group is required
+         */
+        "requiredValidationMessage"?: string;
         /**
           * A string representing the value of the radio.
          */
@@ -9120,6 +9149,7 @@ declare module "@stencil/core" {
              * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
              * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood
              * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood
+             * @method getNativeInput - Returns the native `<input>` HTML element used under the hood
              * @event bqBlur - Handler to be called when the radio loses focus
              * @event bqClick - Handler to be called when the radio state changes
              * @event bqFocus - Handler to be called when the radio gets focused
@@ -9147,6 +9177,8 @@ declare module "@stencil/core" {
              * @attr {boolean} fieldset - If `true` displays fieldset
              * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair
              * @attr {"horizontal" | "vertical"} orientation - The display orientation of the radio inputs
+             * @attr {boolean} required - If `true`, the radio group is required
+             * @attr {string} required-validation-message - The native form validation message when the radio group is required
              * @attr {string} value - The display orientation of the radio inputs
              * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood
              * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood

packages/beeq/src/components/radio-group/_storybook/bq-radio-group.stories.tsx

@@ -124,3 +124,86 @@ export const Fieldset = {
     label: 'radio group',
   },
 };
+
+export const WithForm: Story = {
+  render: () => {
+    const handleFormSubmit = (ev: Event) => {
+      ev.preventDefault();
+      const form = ev.target as HTMLFormElement;
+      const formData = new FormData(form);
+      const formValues = Object.fromEntries(formData.entries());
+
+      const codeElement = document.getElementById('form-data');
+      if (!codeElement) return;
+
+      codeElement.textContent = JSON.stringify(formValues, null, 2);
+    };
+
+    return html`
+      <link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/night-owl.min.css" />
+
+      <div class="grid auto-cols-auto grid-cols-1 gap-y-l sm:grid-cols-2 sm:gap-x-l">
+        <bq-card>
+          <h4 class="m-be-m">Marketing consent</h4>
+          <form class="flex flex-col gap-y-m" @submit=${handleFormSubmit} method="post">
+            <bq-input name="email" value="[email protected]" type="email" autocomplete="organization" required>
+              <label class="flex flex-grow items-center" slot="label">Email address</label>
+            </bq-input>
+            <bq-radio-group
+              name="marketing-consent"
+              orientation="horizontal"
+              required-validation-message="Please, select if you would like to receive marketing emails or not"
+              value="yes"
+              required
+            >
+              <span slot="label">I would like to receive marketing emails</span>
+              <bq-radio value="yes">Yes</bq-radio>
+              <bq-radio value="no">No</bq-radio>
+            </bq-radio-group>
+            <fieldset>
+              <legend>Remember me</legend>
+              <label>
+                <input type="radio" name="remember" value="remember" required />
+                Yes
+              </label>
+              <label>
+                <input type="radio" name="remember" value="forget" required />
+                No
+              </label>
+            </fieldset>
+            <div class="flex justify-end gap-x-s">
+              <bq-button appearance="secondary" type="reset">Cancel</bq-button>
+              <bq-button type="submit">Save</bq-button>
+            </div>
+          </form>
+        </bq-card>
+        <bq-card class="[&::part(wrapper)]:h-full">
+          <h4 class="m-be-m">Form Data</h4>
+          <div class="language-javascript overflow-x-scroll whitespace-pre rounded-s">
+            // Handle form submit<br />
+            const form = ev.target as HTMLFormElement;<br />
+            const formData = new FormData(form);<br />
+            const formValues = Object.fromEntries(formData.entries());
+          </div>
+          <pre>
+            <code id="form-data" class="rounded-s">
+              { // submit the form to see the data here }
+            </code>
+          </pre>
+        </bq-card>
+      </div>
+
+      <script type="module">
+        import hljs from 'https://unpkg.com/@highlightjs/[email protected]/es/highlight.min.js';
+        import javascript from 'https://unpkg.com/@highlightjs/[email protected]/es/languages/javascript.min.js';
+
+        hljs.registerLanguage('javascript', javascript);
+        hljs.highlightAll();
+
+        document.querySelectorAll('div.language-javascript').forEach((block) => {
+          hljs.highlightElement(block);
+        });
+      </script>
+    `;
+  },
+};