Update radio docs (#511)

Description of changes

Update radio docs (and associated CodeSandbox demos) to discuss and provide a warning about the upstream bug described in #476 and offer/demonstrate a workaround fix.

Author: hawkticehurst

src/radio-group/README.md

@@ -38,12 +38,15 @@ While any DOM content is permissible as a child of the `vscode-radio-group`, onl
 
 ### Basic Radio Group
 
+> **Warning**<br>
+> There is a [known upstream bug](https://github.com/microsoft/vscode-webview-ui-toolkit/issues/476) with `vscode-radio` component selection on first interaction. A workaround fix is to make sure that all radio components have a unique `value` attribute applied as demonstrated below.
+
 ```html
 <vscode-radio-group>
   <label slot="label">Radio Group Label</label>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio value="value-1">Radio Label</vscode-radio>
+  <vscode-radio value="value-2">Radio Label</vscode-radio>
+  <vscode-radio value="value-3">Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -52,9 +55,9 @@ While any DOM content is permissible as a child of the `vscode-radio-group`, onl
 ```html
 <vscode-radio-group disabled>
   <label slot="label">Radio Group Label</label>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio value="value-1">Radio Label</vscode-radio>
+  <vscode-radio value="value-2">Radio Label</vscode-radio>
+  <vscode-radio value="value-3">Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -63,9 +66,9 @@ While any DOM content is permissible as a child of the `vscode-radio-group`, onl
 ```html
 <vscode-radio-group name="example-radio-group">
   <label slot="label">Radio Group Label</label>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio value="value-1">Radio Label</vscode-radio>
+  <vscode-radio value="value-2">Radio Label</vscode-radio>
+  <vscode-radio value="value-3">Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -76,16 +79,16 @@ If the orientation attribute is not set, the default orientation is `horizontal`
 ```html
 <vscode-radio-group orientation="vertical">
   <label slot="label">Radio Group Label</label>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio value="value-1">Radio Label</vscode-radio>
+  <vscode-radio value="value-2">Radio Label</vscode-radio>
+  <vscode-radio value="value-3">Radio Label</vscode-radio>
 </vscode-radio-group>
 
 <vscode-radio-group orientation="horizontal">
   <label slot="label">Radio Group Label</label>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio value="value-1">Radio Label</vscode-radio>
+  <vscode-radio value="value-2">Radio Label</vscode-radio>
+  <vscode-radio value="value-3">Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -94,8 +97,8 @@ If the orientation attribute is not set, the default orientation is `horizontal`
 ```html
 <vscode-radio-group readonly>
   <label slot="label">Radio Group Label</label>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
-  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio value="value-1">Radio Label</vscode-radio>
+  <vscode-radio value="value-2">Radio Label</vscode-radio>
+  <vscode-radio value="value-3">Radio Label</vscode-radio>
 </vscode-radio-group>
 ```

src/radio/README.md

@@ -44,3 +44,9 @@ For guidelines on usage in an extension, see the [vscode-radio-group](../radio-g
 ```html
 <vscode-radio disabled>Radio Label</vscode-radio>
 ```
+
+### Value Attribute
+
+```html
+<vscode-radio value="some-value">Radio Label</vscode-radio>
+```