Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Update radio docs #511

Merged
merged 2 commits into from
Oct 13, 2023
Merged

Update radio docs #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2465ce
Update radio docs to discuss radio first interaction bug
hawkticehurst Oct 11, 2023
da16712
Fix typo
hawkticehurst Oct 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions src/radio-group/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand All @@ -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>
```

Expand All @@ -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>
```

Expand All @@ -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>
```

Expand All @@ -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>
```
6 changes: 6 additions & 0 deletions src/radio/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```