FormItem

import '@bendera/vscode-webview-elements/dist/vscode-form-item';

Basic example

Editor: Font Size Controls the font size in pixels. Editor: Font Family Controls the font family.

HTML

<vscode-form-item>
  <vscode-form-label>Editor: Font Size</vscode-form-label>
  <vscode-form-description>Controls the font size in pixels.</vscode-form-description>
  <vscode-form-control>
    <vscode-inputbox value="15" class="narrow"></vscode-inputbox>
  </vscode-form-control>
</vscode-form-item>
<vscode-form-item>
  <vscode-form-label>Editor: Font Family</vscode-form-label>
  <vscode-form-description>Controls the font family.</vscode-form-description>
  <vscode-form-control>
    <vscode-inputbox value="Consolas, 'Courier New', monospace" class="wide"></vscode-inputbox>
  </vscode-form-control>
</vscode-form-item>

CSS

.narrow {
  display: block;
  width: 200px;
}

.wide {
  display: block;
  width: 498px;
}