feat(labs): add radio utility class component

asyncliz · copybara-github · commit d37988b46661 · 2026-04-10T12:18:53.000-07:00
PiperOrigin-RevId: 897824405
diff --git a/labs/gb/components/checkbox/md-checkbox.ts b/labs/gb/components/checkbox/md-checkbox.ts
@@ -114,7 +114,14 @@ export class Checkbox extends baseClass {
 
   @query('input', true)
   private readonly input!: HTMLInputElement | null;
-  private dirty = false;
+  /**
+   * Mimics the behavior of <input> dirty checkedness, where the `checked`
+   * attribute only updates the checked state if the checkbox has not been
+   * interacted with.
+   *
+   * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+   */
+  private dirtyCheckedness = false;
 
   protected override render() {
     // Needed for closure conformance
@@ -137,15 +144,15 @@ export class Checkbox extends baseClass {
   }
 
   private handleInput(event: Event) {
-    this.dirty = true;
+    this.dirtyCheckedness = true;
     const target = event.target as HTMLInputElement;
     this.checked = target.checked;
     this.indeterminate = target.indeterminate;
     // <input> 'input' event bubbles and is composed, don't re-dispatch it.
   }
 
   private handleChange(event: Event) {
-    this.dirty = true;
+    this.dirtyCheckedness = true;
     // <input> 'change' event is not composed, re-dispatch it.
     redispatchEvent(this, event);
   }
@@ -155,7 +162,7 @@ export class Checkbox extends baseClass {
     oldValue: string | null,
     newValue: string | null,
   ) {
-    if (name === 'checked' && this.dirty) {
+    if (name === 'checked' && this.dirtyCheckedness) {
       // The 'checked' attribute does not update checkboxes that have been
       // interacted with.
       return;
@@ -173,7 +180,7 @@ export class Checkbox extends baseClass {
   }
 
   override formResetCallback() {
-    this.dirty = false;
+    this.dirtyCheckedness = false;
     this.checked = this.defaultChecked;
   }
 
diff --git a/labs/gb/components/radio/_radio-tokens.scss b/labs/gb/components/radio/_radio-tokens.scss
@@ -0,0 +1,37 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --icon-size: 20px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-shape: 50%;
+  --state-layer-size: 40px;
+}
+
+@mixin hovered {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin focused {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin pressed {
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected {
+  --icon-color: var(--md-sys-color-primary);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-pressed {
+  --state-layer-color: var(--md-sys-color-on-surface);
+}
+
+@mixin disabled {
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}
diff --git a/labs/gb/components/radio/demo/demo.ts b/labs/gb/components/radio/demo/demo.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './material-collection.js';
+import './index.js';
+
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {boolInput, Knob} from './index.js';
+
+import {stories, StoryKnobs} from './stories.js';
+
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Radio',
+  [
+    new Knob('disabled', {
+      ui: boolInput(),
+    }),
+  ],
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});
diff --git a/labs/gb/components/radio/demo/stories.ts b/labs/gb/components/radio/demo/stories.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/labs/gb/components/radio/md-radio.js';
+
+import {MaterialStoryInit} from './material-collection.js';
+import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
+import {css, html} from 'lit';
+
+import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.css' with {type: 'css'}; // github-only
+// import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js'; // google3-only
+
+/** Knob types for radio stories. */
+export interface StoryKnobs {
+  disabled: boolean;
+}
+
+adoptStyles(document, [
+  m3Styles,
+  css`
+    :root {
+      --md-icon-font: 'Material Symbols Outlined';
+    }
+  `,
+]);
+
+const playground: MaterialStoryInit<StoryKnobs> = {
+  name: 'Playground',
+  render(knobs) {
+    return html`
+      <md-radio name="group" ?disabled=${knobs.disabled}></md-radio>
+      <md-radio name="group" ?disabled=${knobs.disabled}></md-radio>
+      <md-radio name="group" ?disabled=${knobs.disabled}></md-radio>
+    `;
+  },
+};
+
+/** Radio stories. */
+export const stories = [playground];
diff --git a/labs/gb/components/radio/md-radio.ts b/labs/gb/components/radio/md-radio.ts
@@ -0,0 +1,220 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  afterDispatch,
+  setupDispatchHooks,
+} from '@material/web/internal/events/dispatch-hooks.js';
+import {
+  createValidator,
+  getValidityAnchor,
+  mixinConstraintValidation,
+} from '@material/web/labs/behaviors/constraint-validation.js';
+import {
+  internals,
+  mixinElementInternals,
+} from '@material/web/labs/behaviors/element-internals.js';
+import {mixinFocusable} from '@material/web/labs/behaviors/focusable.js';
+import {
+  getFormState,
+  getFormValue,
+  mixinFormAssociated,
+} from '@material/web/labs/behaviors/form-associated.js';
+import {RadioValidator} from '@material/web/labs/behaviors/validators/radio-validator.js';
+import {SingleSelectionController} from '@material/web/radio/internal/single-selection-controller.js';
+import {css, CSSResultOrNative, html, isServer, LitElement} from 'lit';
+import {customElement, property, query, state} from 'lit/decorators.js';
+
+import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with {type: 'css'}; // github-only
+// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with {type: 'css'}; // github-only
+// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import radioStyles from './radio.css' with {type: 'css'}; // github-only
+// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only
+
+import {radio} from './radio.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design radio component. */
+    'md-radio': Radio;
+  }
+}
+
+// Separate variable needed for closure.
+const radioBaseClass = mixinConstraintValidation(
+  mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),
+);
+
+/**
+ * A Material Design radio component.
+ */
+@customElement('md-radio')
+export class Radio extends radioBaseClass {
+  static override styles: CSSResultOrNative[] = [
+    focusRingStyles,
+    rippleStyles,
+    radioStyles,
+    css`
+      :host {
+        display: inline-flex;
+        outline: none;
+      }
+      .radio {
+        flex: 1;
+      }
+    `,
+  ];
+
+  /**
+   * Whether or not the radio is selected.
+   */
+  @property({type: Boolean})
+  get checked() {
+    return this[internals].ariaChecked === 'true';
+  }
+  set checked(checked: boolean) {
+    const wasChecked = this.checked;
+    if (wasChecked === checked) {
+      return;
+    }
+
+    this[internals].ariaChecked = String(checked);
+    this.requestUpdate('checked', wasChecked);
+    this.selectionController.handleCheckedChange();
+  }
+
+  /**
+   * The default checked state of the radio.
+   */
+  get defaultChecked(): boolean {
+    return this.hasAttribute('checked');
+  }
+  set defaultChecked(value: boolean) {
+    this.toggleAttribute('checked', value || false);
+  }
+
+  /**
+   * Whether or not the radio is required. If any radio is required in a group,
+   * all radios are implicitly required.
+   */
+  @property({type: Boolean}) required = false;
+
+  /**
+   * The element value to use in form submission when checked.
+   */
+  @property() value = 'on';
+
+  @query('.radio', true) private readonly radio!: HTMLElement;
+  private readonly selectionController = new SingleSelectionController(this);
+  /**
+   * Mimics the behavior of <input> dirty checkedness, where the `checked`
+   * attribute only updates the checked state if the radio has not been
+   * interacted with.
+   *
+   * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+   */
+  private dirtyCheckedness = false;
+  @state() private isFocused = false;
+
+  constructor() {
+    super();
+    if (isServer) return;
+    this[internals].role = 'radio';
+    this.addController(this.selectionController);
+    setupDispatchHooks(this, 'click', 'keydown');
+    this.addEventListener('click', (event) => {
+      // Return if disabled, or already checked since clicking on a checked
+      // radio does not dispatch events.
+      if (this.disabled || this.checked) return;
+      afterDispatch(event, () => {
+        if (event.defaultPrevented) return;
+        // Per spec, clicking on a radio input always selects it.
+        this.checked = true;
+        this.dirtyCheckedness = true;
+        this.dispatchEvent(new Event('change', {bubbles: true}));
+        this.dispatchEvent(
+          new InputEvent('input', {bubbles: true, composed: true}),
+        );
+      });
+    });
+
+    this.addEventListener('keydown', (event) => {
+      afterDispatch(event, () => {
+        if (event.key !== ' ' || event.defaultPrevented) {
+          return;
+        }
+
+        this.click();
+      });
+    });
+
+    this.addEventListener('focus', () => {
+      this.isFocused = true;
+    });
+
+    this.addEventListener('blur', () => {
+      this.isFocused = false;
+    });
+  }
+
+  protected override render() {
+    return html`<div
+      part="radio"
+      class="ripple-host focus-ring-host ${radio({
+        checked: this.checked,
+        disabled: this.disabled,
+        focus: this.isFocused,
+      })}"></div>`;
+  }
+
+  override attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ) {
+    if (name === 'checked' && this.dirtyCheckedness) {
+      // The 'checked' attribute does not update radios that have been
+      // interacted with.
+      return;
+    }
+
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+
+  override [getFormValue]() {
+    return this.checked ? this.value : null;
+  }
+
+  override [getFormState]() {
+    return String(this.checked);
+  }
+
+  override formResetCallback() {
+    this.dirtyCheckedness = false;
+    this.checked = this.defaultChecked;
+  }
+
+  override formStateRestoreCallback(state: string) {
+    this.checked = state === 'true';
+  }
+
+  override [createValidator]() {
+    return new RadioValidator(() => {
+      if (!this.selectionController) {
+        // Validation runs on superclass construction, so selection controller
+        // might not actually be ready until this class constructs.
+        return [this];
+      }
+
+      return this.selectionController.controls as [Radio, ...Radio[]];
+    });
+  }
+
+  override [getValidityAnchor]() {
+    return this.radio;
+  }
+}
diff --git a/labs/gb/components/radio/radio.scss b/labs/gb/components/radio/radio.scss
diff --git a/labs/gb/components/radio/radio.ts b/labs/gb/components/radio/radio.ts
