Form Group

Basic example

The form group serves as a container component for organizing form widgets, employing CSS adjustments to neatly arrange the elements. The default layout is horizontal.

Lorem ipsum:

Lorem ipsum let dolor = sit amet, consectetur adipiscing elit. Suspendisse faucibus imperdiet sapien, a gravida dolor. 

<vscode-form-group>
  <vscode-label for="basic-textfield-01">
    Lorem <span class="normal">ipsum</span>:
  </vscode-label>
  <vscode-textfield
    id="basic-textfield-01"
    placeholder="Placeholder example"
  ></vscode-textfield>
  <vscode-form-helper>
    <p>
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
      sapien, a gravida <a href="#">dolor</a>.
    </p>
  </vscode-form-helper>
</vscode-form-group>

Vertical layout

In vertical mode the elements are arranged vertically.

Lorem ipsum:

Lorem ipsum let dolor = sit amet, consectetur adipiscing elit. Suspendisse faucibus imperdiet sapien, a gravida dolor. 

<vscode-form-group variant="vertical">
  <vscode-label for="vertical-textfield-01">
    Lorem <span class="normal">ipsum</span>:
  </vscode-label>
  <vscode-textfield
    id="vertical-textfield-01"
    placeholder="Placeholder example"
  ></vscode-textfield>
  <vscode-form-helper>
    <p>
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
      sapien, a gravida <a href="#">dolor</a>.
    </p>
  </vscode-form-helper>
</vscode-form-group>

Settings page group

To create a custom settings page, the “Settings page” variant is recommended. This method enables the creation of interfaces that resemble the appearance of the native settings page. The recommended order is: label, helper text, form control.

Lorem ipsum:

Lorem ipsum let dolor = sit amet, consectetur adipiscing elit. Suspendisse faucibus imperdiet sapien, a gravida dolor. 

<vscode-form-group variant="settings-group">
  <vscode-label for="settings-textfield-01">
    Lorem <span class="normal">ipsum</span>:
  </vscode-label>
  <vscode-form-helper>
    <p>
      Lorem ipsum <code>let dolor = sit amet</code>, consectetur adipiscing
      elit. <span class="error">Suspendisse</span> faucibus imperdiet
      sapien, a gravida <a href="#">dolor</a>.
    </p>
  </vscode-form-helper>
  <vscode-textfield
    id="settings-textfield-01"
    placeholder="Placeholder example"
  ></vscode-textfield>
</vscode-form-group>