Skip to content
VSCode Elements

Radio

This component is compatible with the standard <form> element. For more information on form submission and client-side validation, please refer to the Working with forms section.

The Radio component is intended to select a single option from a set of options. It is designed to be used together with the Radio Group component. For a large number of options, the Single Select is recommended.

Horizontal layout

Section titled “Horizontal layout”

Default layout is horizontal.

<vscode-radio-group>
  <vscode-radio label="Lorem" name="horizontal-example"></vscode-radio>
  <vscode-radio label="Ipsum" name="horizontal-example"></vscode-radio>
  <vscode-radio label="Dolor" name="horizontal-example"></vscode-radio>
</vscode-radio-group>

Vertical layout

Section titled “Vertical layout”
<vscode-radio-group variant="vertical">
  <vscode-radio label="Lorem" name="vertical-example"></vscode-radio>
  <vscode-radio label="Ipsum" name="vertical-example"></vscode-radio>
  <vscode-radio label="Dolor" name="vertical-example"></vscode-radio>
</vscode-radio-group>