<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Form Demo</title>

<link rel="stylesheet" href="../dev-assets/default-webview-styles.css">

<link

rel="stylesheet"

href="../node_modules/@vscode/codicons/dist/codicon.css"

id="vscode-codicon-stylesheet"

>

<script type="module" src="../dev-assets/component-preview.js"></script>

<script type="module" src="../dist/vscode-tabs/index.js"></script>

<script type="module" src="../dist/vscode-form-container/index.js"></script>

<script type="module" src="../dist/vscode-form-group/index.js"></script>

<script type="module" src="../dist/vscode-single-select/index.js"></script>

<script type="module" src="../dist/vscode-multi-select/index.js"></script>

<script type="module" src="../dist/vscode-option/index.js"></script>

<script type="module" src="../dist/vscode-radio/index.js"></script>

<script type="module" src="../dist/vscode-radio-group/index.js"></script>

<script type="module" src="../dist/vscode-checkbox/index.js"></script>

<script type="module" src="../dist/vscode-checkbox-group/index.js"></script>

<script type="module" src="../dist/vscode-form-helper/index.js"></script>

<script type="module" src="../dist/vscode-inputbox/index.js"></script>

<script type="module" src="../dist/vscode-label/index.js"></script>

<script type="module" src="../dist/vscode-textarea/index.js"></script>

<script type="module" src="../dist/vscode-textfield/index.js"></script>

<style>

.form-label b {

color: red;

}

.helper {

width: 400px;

}

</style>

<style id="_defaultStyles">

html {

scrollbar-color: var(--vscode-scrollbarSlider-background)

var(--vscode-editor-background);

}

body {

overscroll-behavior-x: none;

background-color: transparent;

color: var(--vscode-editor-foreground);

font-family: var(--vscode-font-family);

font-weight: var(--vscode-font-weight);

font-size: var(--vscode-font-size);

margin: 0;

padding: 0 20px;

}

img,

video {

max-width: 100%;

max-height: 100%;

}

a,

a code {

color: var(--vscode-textLink-foreground);

}

a:hover {

color: var(--vscode-textLink-activeForeground);

}

a:focus,

input:focus,

select:focus,

textarea:focus {

outline: 1px solid -webkit-focus-ring-color;

outline-offset: -1px;

}

code {

color: var(--vscode-textPreformat-foreground);

}

blockquote {

background: var(--vscode-textBlockQuote-background);

border-color: var(--vscode-textBlockQuote-border);

}

kbd {

background-color: var(--vscode-keybindingLabel-background);

color: var(--vscode-keybindingLabel-foreground);

border-style: solid;

border-width: 1px;

border-radius: 3px;

border-color: var(--vscode-keybindingLabel-border);

border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);

box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);

vertical-align: middle;

padding: 1px 3px;

}

::-webkit-scrollbar {

width: 10px;

height: 10px;

}

::-webkit-scrollbar-corner {

background-color: var(--vscode-editor-background);

}

::-webkit-scrollbar-thumb {

background-color: var(--vscode-scrollbarSlider-background);

}

::-webkit-scrollbar-thumb:hover {

background-color: var(--vscode-scrollbarSlider-hoverBackground);

}

::-webkit-scrollbar-thumb:active {

background-color: var(--vscode-scrollbarSlider-activeBackground);

}

::highlight(find-highlight) {

background-color: var(--vscode-editor-findMatchHighlightBackground);

}

::highlight(current-find-highlight) {

background-color: var(--vscode-editor-findMatchBackground);

}

</style>

</head>

<body>

<div class="story">

<h2 class="story-title">Responsive form</h2>

<div class="story-content">

<component-preview>

<vscode-form-container responsive id="responsive-form">

<vscode-form-group>

<vscode-label for="textfield-01">

Lorem <span class="normal">ipsum</span>:

</vscode-label>

<vscode-textfield

id="textfield-01"

name="input-1"

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>

<ul>

<li>Lorem</li>

<li>Ipsum</li>

<li>Dolor</li>

</ul>

</vscode-form-helper>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="textarea-02"> Dolor sit: </vscode-label>

<vscode-textarea

id="textarea-02"

name="input-2"

placeholder="textarea"

maxlength="5000"

></vscode-textarea>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="select-01">

<span class="lightened">Duis eget</span> erat accumsan:

</vscode-label>

<vscode-single-select id="select-01" name="select-1">

<vscode-option>Lorem</vscode-option>

<vscode-option>Ipsum</vscode-option>

<vscode-option>Dolor</vscode-option>

</vscode-single-select>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="select-02">

<span class="lightened">Duis eget</span> erat accumsan:

</vscode-label>

<vscode-multi-select id="select-02" name="select-2">

<vscode-option>Lorem</vscode-option>

<vscode-option>Ipsum</vscode-option>

<vscode-option>Dolor</vscode-option>

</vscode-multi-select>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="checkbox-group-1">

Phasellus quam arcu:

</vscode-label>

<vscode-checkbox-group id="checkbox-group-1">

<vscode-checkbox

id="checkbox-01"

name="checkbox-group-1"

value="lorem"

label="Lorem ipsum"

checked

></vscode-checkbox>

<vscode-checkbox

id="checkbox-02"

name="checkbox-group-1"

value="ipsum"

label="Donec mi risus"

>

</vscode-checkbox>

<vscode-checkbox

id="checkbox-03"

name="checkbox-group-1"

value="dolor"

>Duis <b>ullamcorper</b>

</vscode-checkbox>

</vscode-checkbox-group>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="checkbox-group-2">

Phasellus quam arcu:

</vscode-label>

<vscode-checkbox-group variant="vertical" id="checkbox-group-2">

<vscode-checkbox

id="checkbox-04"

name="checkbox-group-2"

value="sit"

>Lorem ipsum</vscode-checkbox

>

<vscode-checkbox

id="checkbox-05"

name="checkbox-group-2"

value="et"

>Donec mi risus</vscode-checkbox

>

<vscode-checkbox

id="checkbox-06"

name="checkbox-group-2"

value="amur"

>Nullam tincidunt eros sit amet sollicitudin pharetra. Ut quis

rutrum enim, non finibus odio. Morbi tempus lacus neque, eget

rutrum sapien porttitor vitae. Vivamus placerat nisl eu turpis

tristique, eu consectetur libero finibus. Duis vitae orci at

risus ultrices gravida. Ut vitae nulla velit. Mauris sed enim

eleifend, euismod tortor vitae, vehicula

odio.</vscode-checkbox

>

</vscode-checkbox-group>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="radio-01"> Phasellus quam arcu: </vscode-label>

<vscode-radio-group>

<vscode-radio

id="radio-01"

name="radio-group-1"

value="lorem"

label="Lorem ipsum"

></vscode-radio>

<vscode-radio

id="radio-02"

name="radio-group-1"

value="ipsum"

label="Donec mi risus"

>

</vscode-radio>

<vscode-radio id="radio-03" name="radio-group-1" value="dolor"

>Duis <a href="#">ullamcorper</a>

</vscode-radio>

</vscode-radio-group>

</vscode-form-group>

<vscode-form-group>

<vscode-label for="radio-04"> Phasellus quam arcu: </vscode-label>

<vscode-radio-group variant="vertical">

<vscode-radio id="radio-04" name="radio-group-2" value="sit"

>Lorem ipsum</vscode-radio

>

<vscode-radio id="radio-05" name="radio-group-2" value="et"

>Donec mi risus</vscode-radio

>

<vscode-radio id="radio-06" name="radio-group-2" value="amur"

>Duis ullamcorper</vscode-radio

>

</vscode-radio-group>

</vscode-form-group>

<vscode-form-group>

<vscode-button id="save-button">Save</vscode-button>

<vscode-button secondary>Cancel</vscode-button>

</vscode-form-group>

</vscode-form-container>

</component-preview>

<button class="form-data-button">Show form data</button>

<pre class="form-data-log"></pre>

<script type="module">

const log = document.querySelector('.form-data-log');

const button = document.querySelector('.form-data-button');

button.addEventListener('click', () => {

log.innerHTML = JSON.stringify(

document.querySelector('#responsive-form').data,

null,

2

);

});

const form = document.getElementById('responsive-form');

const group = document.createElement('vscode-form-group');

form.appendChild(group);

const label = document.createElement('vscode-label');

label.htmlFor = 'appended-input';

label.innerHTML = 'Appended item';

group.appendChild(label);

const input = document.createElement('vscode-textfield');

input.id = 'appended-input';

group.appendChild(input);

</script>

</div>

</div>

<div class="story">

<h2 class="story-title">A custom inline form</h2>

<div class="story-content">

<component-preview>

<style>

.new-request-form {

display: flex;

}

.select-method {

margin-right: -1px;

width: 80px;

}

.button-send {

margin-left: -1px;

}

.select-method[focused],

.inputbox-url[focused],

.button-send[focused] {

position: relative;

z-index: 1;

}

</style>

<div class="new-request-form">

<vscode-single-select class="select-method">

<vscode-option selected>GET</vscode-option>

<vscode-option>POST</vscode-option>

<vscode-option>PUT</vscode-option>

<vscode-option>DELETE</vscode-option>

<vscode-option>PATCH</vscode-option>

<vscode-option>HEAD</vscode-option>

<vscode-option>OPTION</vscode-option>

</vscode-single-select>

<vscode-inputbox class="inputbox-url"></vscode-inputbox>

<vscode-button class="button-send">Send</vscode-button>

</div>

</component-preview>

</div>

</div>

<div class="story">

<h2 class="story-title">A native form</h2>

<div class="story-content">

<component-preview>

<style>

.log-settings-row {

align-items: center;

display: flex;

flex-wrap: wrap;

}

.log-settings-row vscode-label,

.log-settings-row vscode-single-select,

.log-settings-row vscode-checkbox,

.log-settings-row vscode-inputbox,

.log-settings-row vscode-button {

margin-top: 2px;

margin-bottom: 2px;

}

.select,

.checkbox,

.input {

margin-left: 4px;

}

.label {

white-space: nowrap;

width: auto;

}

.select-container {

margin-right: 10px;

}

.checkbox {

margin-right: 10px;

}

.input-since,

.input-tail {

width: 50px;

}

.input-tail {

margin-right: 10px;

}

.select-since {

margin-right: 10px;

width: 100px;

}

.button-run {

margin-left: auto;

margin-right: 4px;

}

.select-filter {

width: 120px;

}

.input-keywords {

margin-right: 10px;

}

.button-scroll {

margin-left: auto;

}

</style>

<vscode-form-container>

<div class="log-settings-row">

<vscode-label for="select-container" class="label"

>Container:</vscode-label

>

<vscode-single-select

id="select-container"

class="select select-container"

>

<vscode-option>nginx-container</vscode-option>

<vscode-option>redis-container</vscode-option>

</vscode-single-select>

<vscode-label for="checkbox-follow-logs" class="label"

>Follow Logs:</vscode-label

>

<vscode-checkbox

label=""

id="checkbox-follow-logs"

class="checkbox"

></vscode-checkbox>

<vscode-label for="checkbox-show-timestamp" class="label"

>Show timestamp:</vscode-label

>

<vscode-checkbox

label=""

id="checkbox-show-timestamp"

class="checkbox"

></vscode-checkbox>

<vscode-label for="input-since" class="label"

>Since:</vscode-label

>

<vscode-textfield

value="0"

id="input-since"

class="input input-since"

></vscode-textfield>

<vscode-single-select class="select select-since">

<vscode-option>minutes</vscode-option>

<vscode-option>hours</vscode-option>

</vscode-single-select>

<vscode-label for="input-tail" class="label">Tail:</vscode-label>

<vscode-textfield

value="-1"

id="input-tail"

class="input input-tail"

></vscode-textfield>

<vscode-label for="checkbox-to-terminal" class="label"

>To terminal:</vscode-label

>

<vscode-checkbox

id="checkbox-to-terminal"

class="checkbox"

></vscode-checkbox>

<div>

<vscode-button class="button-run">Run</vscode-button>

<vscode-button>Reset</vscode-button>

</div>

</div>

<div class="log-settings-row">

<vscode-label for="select-filter" class="label"

>Filter:</vscode-label

>

<vscode-single-select

id="select-filter"

class="select select-filter"

>

<vscode-option>all</vscode-option>

</vscode-single-select>

<vscode-textfield

placeholder="Enter your keywords"

class="input input-keywords"

></vscode-textfield>

<vscode-label for="checkbox-wrap-lines" class="label"

>Wrap lines:</vscode-label

>

<vscode-checkbox

id="checkbox-wrap-lines"

class="checkbox"

></vscode-checkbox>

<vscode-button class="button-scroll"

>Scroll To Bottom</vscode-button

>

</div>

</vscode-form-container>

</component-preview>

</div>

</div>

<div class="story">

<h2 class="story-title">Settings form</h2>

<div class="story-content">

<component-preview>

<vscode-form-container>

<vscode-form-group variant="settings-group">

<vscode-label

><span class="lightened">Editor:</span> Font Size</vscode-label

>

<vscode-form-helper>

<p>Controls the font size in pixels.</p>

</vscode-form-helper>

<vscode-inputbox

size-variant="narrow"

value="14"

></vscode-inputbox>

</vscode-form-group>

<vscode-form-group variant="settings-group">

<vscode-label

><span class="lightened">Editor:</span> Font

Family</vscode-label

>

<vscode-form-helper>

<p>Controls the font family.</p>

</vscode-form-helper>

<vscode-inputbox

size-variant="wide"

value="'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace"

></vscode-inputbox>

</vscode-form-group>

<vscode-form-group variant="settings-group">

<vscode-label

><span class="lightened">Editor:</span> Insert

Spaces</vscode-label

>

<vscode-checkbox>

<p>

Insert spaces when pressing <code>Tab</code>. This setting is

overridden based on the file contents when

<a href="#" title="#editor.detectIndentation"

>Editor: Detect Indentation</a

>

is on.

</p>

</vscode-checkbox>

</vscode-form-group>

<vscode-form-group variant="settings-group">

<vscode-label

><span class="lightened">Editor:</span> Word Wrap</vscode-label

>

<vscode-form-helper>

<p>Controls how lines should wrap.</p>

</vscode-form-helper>

<vscode-single-select>

<vscode-option>on</vscode-option>

<vscode-option>off</vscode-option>

</vscode-single-select>

</vscode-form-group>

<vscode-form-group variant="settings-group">

<vscode-label>Title</vscode-label>

<vscode-form-helper>

<p>

Controls the window title based on the active editor.

Variables are substituted based on the context:

</p>

<ul>

<li>

<code>${activeEditorShort}</code>: the file name (e.g.

myFile.txt).

</li>

<li>

<code>${activeEditorMedium}</code>: the path of the file

relative to the workspace folder (e.g.

myFolder/myFileFolder/myFile.txt).

</li>

<li>

<code>${activeEditorLong}</code>: the full path of the file

(e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).

</li>

<li>

<code>${activeFolderShort}</code>: the name of the folder

the file is contained in (e.g. myFileFolder).

</li>

<li>

<code>${activeFolderMedium}</code>: the path of the folder

the file is contained in, relative to the workspace folder

(e.g. myFolder/myFileFolder).

</li>

<li>

<code>${activeFolderLong}</code>: the full path of the

folder the file is contained in (e.g.

/Users/Development/myFolder/myFileFolder).

</li>

<li>

<code>${folderName}</code>: name of the workspace folder the

file is contained in (e.g. myFolder).

</li>

<li>

<code>${folderPath}</code>: file path of the workspace

folder the file is contained in (e.g.

/Users/Development/myFolder).

</li>

<li>

<code>${rootName}</code>: name of the opened workspace or

folder (e.g. myFolder or myWorkspace).

</li>

<li>

<code>${rootPath}</code>: file path of the opened workspace

or folder (e.g. /Users/Development/myWorkspace).

</li>

<li><code>${appName}</code>: e.g. VS Code.</li>

<li><code>${remoteName}</code>: e.g. SSH</li>

<li>

<code>${dirty}</code>: a dirty indicator if the active

editor is dirty.

</li>

<li>

<code>${separator}</code>: a conditional separator (" - ")

that only shows when surrounded by variables with values or

static text.

</li>

</ul>

</vscode-form-helper>

<vscode-inputbox class="wide"></vscode-inputbox>

</vscode-form-group>

</vscode-form-container>

</component-preview>

</div>

</div>

<!-- <div class="story">

<h2 class="story-title">A native form</h2>

<div class="story-content">

<form action="#">

<label for="tf-1">Textfield 1</label>

<input type="text" placeholder="Textfield 1" id="tf-1" />

<input

type="radio"

name="radio-example"

id="rb-1"

value="op1"

/><label for="rb-1">option 1</label><br />

<input

type="radio"

name="radio-example"

id="rb-2"

value="op2"

/><label for="rb-2">option 2</label><br />

<input

type="radio"

name="radio-example"

id="rb-3"

value="op3"

/><label for="rb-3">option 3</label><br />

<input

type="checkbox"

name="checkbox-example"

id="cb-1"

value="op1"

/><label for="cb-1">option 1</label><br />

<input

type="checkbox"

name="checkbox-example"

id="cb-2"

value="op2"

/><label for="cb-2">option 2</label><br />

<input

type="checkbox"

name="checkbox-example"

id="cb-3"

value="op3"

/><label for="cb-3">option 3</label><br />

</form>

</div>

</div> -->

</body>

</html>