Visual Studio Code Radio Group

The vscode-radio-group is a web component implementation of a radio group.

Usage

❌ Don't	✅ Do
Don't use radio buttons when more than one selection is possible. Try using checkboxes instead.	Use radio groups for options that feature a single selection at a time.

❌ Don't	✅ Do
Avoid using horizontal radio group layouts.	Arrange radio groups vertically to make it easy to scan and compare options.

❌ Don't	✅ Do
Don't use long blocks of text.	Use concise language to describe each option.

Implementation

While any DOM content is permissible as a child of the vscode-radio-group, only vscode-radio components and slotted content with a role of radio will receive keyboard support.

Interactive component examples

Attributes

Attribute	Type	Description
disabled	boolean	Disables the radio group and child radios.
name	string	The name of the radio group. This will also set the name value for all child radio elements.
orientation	string	The orientation of the group. Options: horizontal, vertical.
readonly	boolean	When true, the child radios will be immutable by user interaction.

Basic Radio Group

Warning
There is a known upstream bug 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.

<vscode-radio-group>
  <label slot="label">Radio Group Label</label>
  <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>

Disabled Attribute

<vscode-radio-group disabled>
  <label slot="label">Radio Group Label</label>
  <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>

Name Attribute

<vscode-radio-group name="example-radio-group">
  <label slot="label">Radio Group Label</label>
  <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>

Orientation Attribute

If the orientation attribute is not set, the default orientation is horizontal.

<vscode-radio-group orientation="vertical">
  <label slot="label">Radio Group Label</label>
  <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 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>

Read Only Attribute

<vscode-radio-group readonly>
  <label slot="label">Radio Group Label</label>
  <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>