diff --git a/src/dev-app/mdc-radio/mdc-radio-demo.html b/src/dev-app/mdc-radio/mdc-radio-demo.html
index 623d6a71f798..841ddb1dd198 100644
--- a/src/dev-app/mdc-radio/mdc-radio-demo.html
+++ b/src/dev-app/mdc-radio/mdc-radio-demo.html
@@ -1,2 +1,6 @@
-
-Not yet implemented.
+
Basic Example
+
+ Option 1
+ Option 2
+ Option 3
+
diff --git a/src/material-experimental/mdc-radio/BUILD.bazel b/src/material-experimental/mdc-radio/BUILD.bazel
index 8923b64d2c77..8f29ad25324c 100644
--- a/src/material-experimental/mdc-radio/BUILD.bazel
+++ b/src/material-experimental/mdc-radio/BUILD.bazel
@@ -28,6 +28,14 @@ sass_library(
sass_binary(
name = "radio_scss",
src = "radio.scss",
+ include_paths = [
+ "external/npm/node_modules",
+ ],
+ deps = [
+ "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+ "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+ "//src/material/core:core_scss_lib",
+ ],
)
ng_e2e_test_library(
diff --git a/src/material-experimental/mdc-radio/radio.html b/src/material-experimental/mdc-radio/radio.html
index 9c75ddb6f477..f6d686ac9e50 100644
--- a/src/material-experimental/mdc-radio/radio.html
+++ b/src/material-experimental/mdc-radio/radio.html
@@ -1 +1,12 @@
-
+
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
index f61450904c9a..f295d529ca75 100644
--- a/src/material-experimental/mdc-radio/radio.scss
+++ b/src/material-experimental/mdc-radio/radio.scss
@@ -1 +1,7 @@
-// TODO: MDC core styles here.
+@import '@material/radio/mixins';
+@import '@material/form-field/mixins';
+@import '../mdc-helpers/mdc-helpers';
+
+
+@include mdc-radio-without-ripple($query: $mat-base-styles-query);
+@include mdc-form-field-core-styles($query: $mat-base-styles-query);
diff --git a/src/material-experimental/mdc-radio/radio.ts b/src/material-experimental/mdc-radio/radio.ts
index cad810b21142..7f11085282e7 100644
--- a/src/material-experimental/mdc-radio/radio.ts
+++ b/src/material-experimental/mdc-radio/radio.ts
@@ -6,7 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation, Input} from '@angular/core';
+
+// Increasing integer for generating unique ids for radio components.
+let nextUniqueId = 0;
@Component({
moduleId: module.id,
@@ -15,11 +18,21 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
styleUrls: ['radio.css'],
host: {
'class': 'mat-mdc-radio',
+ '[attr.id]': 'id',
},
exportAs: 'matRadio',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatRadio {
+
+ private _uniqueId: string = `mat-radio-${++nextUniqueId}`;
+
+ /** The unique ID for the radio button. */
+ @Input() id: string = this._uniqueId;
+
+ /** ID of the native input element inside `` */
+ get inputId(): string { return `${this.id || this._uniqueId}-input`; }
+
// TODO: set up MDC foundation class.
}