W↓
All docs
🔑
Sign Up/Sign In
vscode-elements.github.io/elements-lite/
Public Link
Apr 9, 2025, 3:45:08 AM - complete - 40.9 kB
Starting URLs:
https://vscode-elements.github.io/elements-lite/guides/getting-started/
Crawl Prefixes:
https://vscode-elements.github.io/elements-lite/
## Page: https://vscode-elements.github.io/elements-lite/guides/getting-started/ VSCode Elements Lite is a simpler, lightweight alternative to VSCode Elements. There’s no need to deal with TypeScript or bundler configurations. In fact, you don’t even need to install a package if you prefer not to—just copy the code snippet you need. While VSCode Elements Lite doesn’t cover every case that VSCode Elements does, it’s sufficient for most purposes. You can also use it together with VSCode Elements components. ## Current state of the project Although the website is still under development, the components are ready for production. ## Using the Configurator The easiest way to get started is by using the configurator. Set the desired parameters, then copy the generated HTML snippet. The related CSS is also provided on the configurator page—simply copy the code and add it to your project. ## Install as npm package If you’re using a bundler like Webpack or Vite, you can install VSCode Elements Lite as an npm package: npm install @vscode-elements/elements-lite Next, import the necessary styles: import "@vscode-elements/elements-lite/components/button/button.css"; --- ## Page: https://vscode-elements.github.io/elements-lite/  HTML + CSS snippets for developing screens in the VSCode Webview Getting Started --- ## Page: https://vscode-elements.github.io/elements-lite/guides/getting-started VSCode Elements Lite is a simpler, lightweight alternative to VSCode Elements. There’s no need to deal with TypeScript or bundler configurations. In fact, you don’t even need to install a package if you prefer not to—just copy the code snippet you need. While VSCode Elements Lite doesn’t cover every case that VSCode Elements does, it’s sufficient for most purposes. You can also use it together with VSCode Elements components. ## Current state of the project Although the website is still under development, the components are ready for production. ## Using the Configurator The easiest way to get started is by using the configurator. Set the desired parameters, then copy the generated HTML snippet. The related CSS is also provided on the configurator page—simply copy the code and add it to your project. ## Install as npm package If you’re using a bundler like Webpack or Vite, you can install VSCode Elements Lite as an npm package: npm install @vscode-elements/elements-lite Next, import the necessary styles: import "@vscode-elements/elements-lite/components/button/button.css"; --- ## Page: https://vscode-elements.github.io/elements-lite/components/action-button Buttons placed on a toolbar with or without label. ## Basic example <button type="button" class="vscode-action-button" title="File"> <i class="codicon codicon-file" aria-hidden="true"></i></button> ## With label <button type="button" class="vscode-action-button"> <i class="codicon codicon-plus" aria-hidden="true"></i> <span class="label">Markdown</span></button> ## Disabled state <button type="button" class="vscode-action-button" title="File" disabled> <i class="codicon codicon-file" aria-hidden="true"></i></button> --- ## Page: https://vscode-elements.github.io/elements-lite/components/badge * Docs * Configurator Indicates status information from the system. ## Basic example 308 Settings Found <span class="vscode-badge">308 Settings Found</span> ## Counter 42 <span class="vscode-badge counter">42</span> ## Activity Bar Counter The same style as the counters in the activity bar. 42 <span class="vscode-badge activity-bar-counter">42</span> --- ## Page: https://vscode-elements.github.io/elements-lite/components/button * Docs * Configurator Button. ## Basic example <button type="button" class="vscode-button">Primary Button</button> ## Secondary Button <button type="button" class="vscode-button secondary">Secondary Button</button> ## Block Button Same size as the call to action buttons in the sidebar like “Commit” and “Run and Debug”. <button type="button" class="vscode-button block">Block Button</button> --- ## Page: https://vscode-elements.github.io/elements-lite/components/checkbox Checkbox. ## Basic example Checkbox example <div class="vscode-checkbox"> <input type="checkbox" id="checkbox-1"> <label for="checkbox-1"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text"> Checkbox example </span> </label></div> ## Indeterminate checkbox Indeterminated state is applied on checkbox. MDN Reference Indeterminate checkbox * HTML * JavaScript <div class="vscode-checkbox"> <input type="checkbox" id="checkbox-2"> <label for="checkbox-2"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text"> Indeterminate checkbox </span> </label></div> ## Invalid checkbox Checkbox example <div class="vscode-checkbox"> <input type="checkbox" id="checkbox-3" required> <label for="checkbox-3"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text"> Checkbox example </span> </label></div> ## Checkbox group Multiple checkboxes can be grouped together. The default layout is horizontal. Lorem Ipsum Dolor <div class="vscode-checkbox-group"> <div class="vscode-checkbox"> <input type="checkbox" id="group-1-checkbox-1"> <label for="group-1-checkbox-1"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Lorem</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-1-checkbox-2"> <label for="group-1-checkbox-2"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Ipsum</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-1-checkbox-3"> <label for="group-1-checkbox-3"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Dolor</span> </label> </div></div> ## Vertical checkbox group Lorem Ipsum Dolor <div class="vscode-checkbox-group vertical"> <div class="vscode-checkbox"> <input type="checkbox" id="group-2-checkbox-1"> <label for="group-2-checkbox-1"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Lorem</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-2-checkbox-2"> <label for="group-2-checkbox-2"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Ipsum</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-2-checkbox-3"> <label for="group-2-checkbox-3"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Dolor</span> </label> </div></div> --- ## Page: https://vscode-elements.github.io/elements-lite/components/collapsible Collapsible is based on the `<details>` HTML element. MDN Reference ## Basic example ## Collapsible Collapsible content. <details class="vscode-collapsible"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible</h2> </summary> <div> <p>Collapsible content.</p> </div></details> ## Initially open ## Collapsible Collapsible content. <details class="vscode-collapsible" open> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible</h2> </summary> <div> <p>Collapsible content.</p> </div></details> ## Description Additional information in the header. It is only visible when component is open. ## Collapsible Collapsible description Collapsible content. <details class="vscode-collapsible"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title"> Collapsible <span class="description">Collapsible description</span> </h2> </summary> <div> <p>Collapsible content.</p> </div></details> ## Actions Actions are clickable buttons in the header when the `Collapsible` component is open and the cursor hovers over it. ## Timeline Collapsible content. <details class="vscode-collapsible"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Timeline</h2> <div class="actions"> <button type="button" class="vscode-action-button" title="New File"> <i class="codicon codicon-new-file" aria-hidden="true"></i> </button> <button type="button" class="vscode-action-button" title="New Folder"> <i class="codicon codicon-new-folder" aria-hidden="true"></i> </button> </div> </summary> <div> <p>Collapsible content.</p> </div></details> ## Always show actions Actions are always visible when `Collapsible` is open. It is intended to reflect the `workbench.view.alwaysShowHeaderActions` option. ## Timeline Collapsible content. <details class="vscode-collapsible always-show-actions"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Timeline</h2> <div class="actions"> <button type="button" class="vscode-action-button" title="New File"> <i class="codicon codicon-new-file" aria-hidden="true"></i> </button> <button type="button" class="vscode-action-button" title="New Folder"> <i class="codicon codicon-new-folder" aria-hidden="true"></i> </button> </div> </summary> <div> <p>Collapsible content.</p> </div></details> ## Exclusive accordion mode Multiple `Collapsible` components connected together, where only one can be open at a time. MDN Reference ## Collapsible 1 Collapsible 1 content. ## Collapsible 2 Collapsible 2 content. ## Collapsible 3 Collapsible 3 content. <details class="vscode-collapsible" name="accordion-example"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible 1</h2> </summary> <div> <p>Collapsible 1 content.</p> </div></details><details class="vscode-collapsible" name="accordion-example"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible 2</h2> </summary> <div> <p>Collapsible 2 content.</p> </div></details><details class="vscode-collapsible" name="accordion-example"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible 3</h2> </summary> <div> <p>Collapsible 3 content.</p> </div></details> --- ## Page: https://vscode-elements.github.io/elements-lite/components/divider <hr class="vscode-divider"> --- ## Page: https://vscode-elements.github.io/elements-lite/components/form-container Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/form-group Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/form-helper Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/label Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/progress-ring Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/radio Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/select Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/table Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/textarea Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/textfield Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/action-button/configurator .vscode-action-button { align-items: center; background-color: transparent; border-color: transparent; border-style: solid; border-width: 1px; border-radius: 5px; color: var(--vscode-foreground); display: inline-flex; cursor: pointer; padding: 0; user-select: none;}.vscode-action-button:disabled { color: var(--vscode-disabledForeground); cursor: default; pointer-events: none;}.vscode-action-button .codicon,.vscode-action-button svg { color: var(--vscode-icon-foreground); display: block; padding: 2px;}.vscode-action-button svg { box-sizing: content-box; height: 16px; width: 16px;}.vscode-action-button:disabled .codicon,.vscode-action-button:disabled svg { color: var(--vscode-disabledForeground);}.vscode-action-button:hover { background-color: var(--vscode-toolbar-hoverBackground);}.vscode-action-button:active { background-color: var(--vscode-toolbar-activeBackground);}.vscode-action-button:focus { outline: none;}.vscode-action-button:focus-visible { border-color: var(--vscode-focusBorder);}.label { display: block; padding: 0 5px 0 2px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/badge/configurator ## Configurator Caption Variant 2 unsaved ## CSS .vscode-badge { background-color: var(--vscode-badge-background); border: 1px solid var(--vscode-contrastBorder, transparent); border-radius: 2px; box-sizing: border-box; color: var(--vscode-badge-foreground); display: inline-block; font-family: var(--vscode-font-family); font-size: 11px; font-weight: 400; line-height: 14px; min-width: 18px; padding: 2px 3px; text-align: center; white-space: nowrap;}.vscode-badge.counter { border-radius: 11px; box-sizing: border-box; height: 18px; line-height: 1; padding: 3px 5px;}.vscode-badge.activity-bar-counter { background-color: var(--vscode-activityBarBadge-background); border-radius: 20px; color: var(--vscode-activityBarBadge-foreground); font-size: 9px; font-weight: 600; line-height: 16px; padding: 0 4px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/button/configurator ## Configurator Caption Icon Before Icon After Icon Type Secondary Block ## CSS .vscode-button { align-items: center; background-color: var(--vscode-button-background); border-color: var(--vscode-button-border, var(--vscode-button-background)); border-style: solid; border-radius: 2px; border-width: 1px; color: var(--vscode-button-foreground); cursor: pointer; display: inline-flex; font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); font-weight: var(--vscode-font-weight); line-height: 22px; overflow: hidden; padding: 1px 13px; user-select: none; white-space: nowrap;}.vscode-button:hover { background-color: var(--vscode-button-hoverBackground);}.vscode-button:focus,.vscode-button:active { outline: none;}.vscode-button:focus { background-color: var(--vscode-button-hoverBackground); outline: 1px solid var(--vscode-focusBorder); outline-offset: 2px;}.vscode-button.secondary { color: var(--vscode-button-secondaryForeground); background-color: var(--vscode-button-secondaryBackground); border-color: var(--vscode-button-border, var(--vscode-button-secondaryBackground));}.vscode-button.secondary:hover { background-color: var(--vscode-button-secondaryHoverBackground);}.vscode-button.secondary:focus { background-color: var(--vscode-button-secondaryHoverBackground);}.vscode-button:disabled { cursor: default; opacity: 0.4; pointer-events: none;}.vscode-button:disabled:hover { background-color: var(--vscode-button-background);}.vscode-button:disabled { background-color: var(--vscode-button-background); outline: 0;}.vscode-button.secondary:disabled { background-color: var(--vscode-button-secondaryBackground);}.vscode-button.secondary:disabled:hover { background-color: var(--vscode-button-secondaryHoverBackground);}.vscode-button.block { align-items: center; display: flex; justify-content: center; padding-bottom: 2px; padding-top: 2px; width: 100%;}.vscode-button svg { display: block;}.vscode-button .codicon,.vscode-button svg { margin-left: 3px; margin-right: 3px;}.vscode-button .codicon:first-child,.vscode-button svg:first-child { margin-left: 0;}.vscode-button .codicon:last-child,.vscode-button svg:last-child { margin-right: 0;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/checkbox/configurator ## Configurator Checkbox group Number of checkboxes Group layout Icon Type Checkbox 1 ## CSS .vscode-checkbox { display: inline-flex; position: relative; user-select: none;}.vscode-checkbox input[type="checkbox"] { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}.vscode-checkbox .icon-checked,.vscode-checkbox .icon-indeterminate { display: none; height: 16px; left: 0; position: absolute; top: 0; width: 16px;}.vscode-checkbox .icon-checked,.vscode-checkbox .icon-indeterminate { display: none;}.vscode-checkbox input[type="checkbox"]:checked + label .icon-checked { display: block;}.vscode-checkbox input[type="checkbox"]:indeterminate + label .icon-indeterminate { display: block;}.vscode-checkbox .icon { align-items: center; background-color: var(--vscode-settings-checkboxBackground); background-size: 16px; border: 1px solid var(--vscode-settings-checkboxBorder); border-radius: 3px; box-sizing: border-box; color: var(--vscode-settings-checkboxForeground); display: flex; height: 18px; justify-content: center; margin-left: 0; margin-right: 9px; padding: 0; pointer-events: none; position: relative; width: 18px;}.vscode-checkbox input[type="checkbox"]:invalid + label .icon,.vscode-checkbox input[type="checkbox"].invalid + label .icon { background-color: var(--vscode-inputValidation-errorBackground); border-color: var(--vscode-inputValidation-errorBorder, #be1100);}.vscode-checkbox input[type="checkbox"]:focus + label .icon { border-color: var(--vscode-focusBorder);}.vscode-checkbox label { cursor: pointer; display: inline-flex; line-height: 18px;}.vscode-checkbox .text { opacity: 0.9;}.vscode-checkbox-group { display: flex;}.vscode-checkbox-group .vscode-checkbox { display: block;}.vscode-checkbox-group .vscode-checkbox:not(:last-child) { margin-right: 20px;}.vscode-checkbox-group.vertical { flex-direction: column;}.vscode-checkbox-group .vscode-checkbox { margin-right: 0; margin-bottom: 15px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/collapsible/configurator .vscode-collapsible + .vscode-collapsible { border-top: 1px solid var(--vscode-sideBarSectionHeader-border);}.vscode-collapsible summary { align-items: center; background-color: var(--vscode-sideBarSectionHeader-background); cursor: pointer; display: flex; height: 22px; line-height: 22px; user-select: none;}.vscode-collapsible summary:focus { opacity: 1; outline-offset: -1px; outline-style: solid; outline-width: 1px; outline-color: var(--vscode-focusBorder);}.vscode-collapsible .icon-arrow { display: block; margin: 0 3px;}.vscode-collapsible[open] .icon-arrow { transform: rotate(90deg);}.vscode-collapsible .title { color: var(--vscode-sideBarSectionHeader-foreground); display: block; font-family: var(--vscode-font-family); font-size: 11px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;}.vscode-collapsible .title .description { display: none; font-weight: 400; margin-left: 10px; text-transform: none; opacity: 0.6;}.vscode-collapsible[open] .title .description { display: inline;}.vscode-collapsible .actions { align-items: center; display: none; height: 22px; margin-left: auto; margin-right: 4px;}.vscode-collapsible.always-show-actions[open] summary .actions,.vscode-collapsible[open]:hover summary .actions { display: flex;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/divider/configurator * Docs * Configurator ## Configurator There is no configuration options. ## CSS .vscode-divider { background-color: var(--vscode-widget-border); border: 0; display: block; height: 1px; margin-bottom: 10px; margin-top: 10px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/form-container/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/form-group/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/form-helper/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/label/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/progress-ring/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/radio/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/select/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/table/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/textarea/configurator Skip to content Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/textfield/configurator Skip to content * Guides * Getting Started * Components * Action Button * Badge * Button * Checkbox * Collapsible * Divider * Form Container (wip) * Form Group (wip) * Form Helper (wip) * Label (wip) * Progress Ring (wip) * Radio (wip) * Select (wip) * Table (wip) * Textarea (wip) * Textfield (wip) * Configurator * Action Button * Badge * Button * Checkbox * Collapsible * Divider * Form Container (wip) * Form Group (wip) * Form Helper (wip) * Label (wip) * Progress Ring (wip) * Radio (wip) * Select (wip) * Table (wip) * Textarea (wip) * Textfield (wip) Work in progress. --- ## Page: https://vscode-elements.github.io/elements-lite/components/action-button/ Buttons placed on a toolbar with or without label. ## Basic example <button type="button" class="vscode-action-button" title="File"> <i class="codicon codicon-file" aria-hidden="true"></i></button> ## With label <button type="button" class="vscode-action-button"> <i class="codicon codicon-plus" aria-hidden="true"></i> <span class="label">Markdown</span></button> ## Disabled state <button type="button" class="vscode-action-button" title="File" disabled> <i class="codicon codicon-file" aria-hidden="true"></i></button> --- ## Page: https://vscode-elements.github.io/elements-lite/components/action-button/configurator/ .vscode-action-button { align-items: center; background-color: transparent; border-color: transparent; border-style: solid; border-width: 1px; border-radius: 5px; color: var(--vscode-foreground); display: inline-flex; cursor: pointer; padding: 0; user-select: none;}.vscode-action-button:disabled { color: var(--vscode-disabledForeground); cursor: default; pointer-events: none;}.vscode-action-button .codicon,.vscode-action-button svg { color: var(--vscode-icon-foreground); display: block; padding: 2px;}.vscode-action-button svg { box-sizing: content-box; height: 16px; width: 16px;}.vscode-action-button:disabled .codicon,.vscode-action-button:disabled svg { color: var(--vscode-disabledForeground);}.vscode-action-button:hover { background-color: var(--vscode-toolbar-hoverBackground);}.vscode-action-button:active { background-color: var(--vscode-toolbar-activeBackground);}.vscode-action-button:focus { outline: none;}.vscode-action-button:focus-visible { border-color: var(--vscode-focusBorder);}.label { display: block; padding: 0 5px 0 2px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/badge/ * Docs * Configurator Indicates status information from the system. ## Basic example 308 Settings Found <span class="vscode-badge">308 Settings Found</span> ## Counter 42 <span class="vscode-badge counter">42</span> ## Activity Bar Counter The same style as the counters in the activity bar. 42 <span class="vscode-badge activity-bar-counter">42</span> --- ## Page: https://vscode-elements.github.io/elements-lite/components/badge/configurator/ ## Configurator Caption Variant 2 unsaved ## CSS .vscode-badge { background-color: var(--vscode-badge-background); border: 1px solid var(--vscode-contrastBorder, transparent); border-radius: 2px; box-sizing: border-box; color: var(--vscode-badge-foreground); display: inline-block; font-family: var(--vscode-font-family); font-size: 11px; font-weight: 400; line-height: 14px; min-width: 18px; padding: 2px 3px; text-align: center; white-space: nowrap;}.vscode-badge.counter { border-radius: 11px; box-sizing: border-box; height: 18px; line-height: 1; padding: 3px 5px;}.vscode-badge.activity-bar-counter { background-color: var(--vscode-activityBarBadge-background); border-radius: 20px; color: var(--vscode-activityBarBadge-foreground); font-size: 9px; font-weight: 600; line-height: 16px; padding: 0 4px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/button/ * Docs * Configurator Button. ## Basic example <button type="button" class="vscode-button">Primary Button</button> ## Secondary Button <button type="button" class="vscode-button secondary">Secondary Button</button> ## Block Button Same size as the call to action buttons in the sidebar like “Commit” and “Run and Debug”. <button type="button" class="vscode-button block">Block Button</button> --- ## Page: https://vscode-elements.github.io/elements-lite/components/button/configurator/ ## Configurator Caption Icon Before Icon After Icon Type Secondary Block ## CSS .vscode-button { align-items: center; background-color: var(--vscode-button-background); border-color: var(--vscode-button-border, var(--vscode-button-background)); border-style: solid; border-radius: 2px; border-width: 1px; color: var(--vscode-button-foreground); cursor: pointer; display: inline-flex; font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); font-weight: var(--vscode-font-weight); line-height: 22px; overflow: hidden; padding: 1px 13px; user-select: none; white-space: nowrap;}.vscode-button:hover { background-color: var(--vscode-button-hoverBackground);}.vscode-button:focus,.vscode-button:active { outline: none;}.vscode-button:focus { background-color: var(--vscode-button-hoverBackground); outline: 1px solid var(--vscode-focusBorder); outline-offset: 2px;}.vscode-button.secondary { color: var(--vscode-button-secondaryForeground); background-color: var(--vscode-button-secondaryBackground); border-color: var(--vscode-button-border, var(--vscode-button-secondaryBackground));}.vscode-button.secondary:hover { background-color: var(--vscode-button-secondaryHoverBackground);}.vscode-button.secondary:focus { background-color: var(--vscode-button-secondaryHoverBackground);}.vscode-button:disabled { cursor: default; opacity: 0.4; pointer-events: none;}.vscode-button:disabled:hover { background-color: var(--vscode-button-background);}.vscode-button:disabled { background-color: var(--vscode-button-background); outline: 0;}.vscode-button.secondary:disabled { background-color: var(--vscode-button-secondaryBackground);}.vscode-button.secondary:disabled:hover { background-color: var(--vscode-button-secondaryHoverBackground);}.vscode-button.block { align-items: center; display: flex; justify-content: center; padding-bottom: 2px; padding-top: 2px; width: 100%;}.vscode-button svg { display: block;}.vscode-button .codicon,.vscode-button svg { margin-left: 3px; margin-right: 3px;}.vscode-button .codicon:first-child,.vscode-button svg:first-child { margin-left: 0;}.vscode-button .codicon:last-child,.vscode-button svg:last-child { margin-right: 0;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/checkbox/ Checkbox. ## Basic example Checkbox example <div class="vscode-checkbox"> <input type="checkbox" id="checkbox-1"> <label for="checkbox-1"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text"> Checkbox example </span> </label></div> ## Indeterminate checkbox Indeterminated state is applied on checkbox. MDN Reference Indeterminate checkbox * HTML * JavaScript <div class="vscode-checkbox"> <input type="checkbox" id="checkbox-2"> <label for="checkbox-2"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text"> Indeterminate checkbox </span> </label></div> ## Invalid checkbox Checkbox example <div class="vscode-checkbox"> <input type="checkbox" id="checkbox-3" required> <label for="checkbox-3"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text"> Checkbox example </span> </label></div> ## Checkbox group Multiple checkboxes can be grouped together. The default layout is horizontal. Lorem Ipsum Dolor <div class="vscode-checkbox-group"> <div class="vscode-checkbox"> <input type="checkbox" id="group-1-checkbox-1"> <label for="group-1-checkbox-1"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Lorem</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-1-checkbox-2"> <label for="group-1-checkbox-2"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Ipsum</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-1-checkbox-3"> <label for="group-1-checkbox-3"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Dolor</span> </label> </div></div> ## Vertical checkbox group Lorem Ipsum Dolor <div class="vscode-checkbox-group vertical"> <div class="vscode-checkbox"> <input type="checkbox" id="group-2-checkbox-1"> <label for="group-2-checkbox-1"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Lorem</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-2-checkbox-2"> <label for="group-2-checkbox-2"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Ipsum</span> </label> </div> <div class="vscode-checkbox"> <input type="checkbox" id="group-2-checkbox-3"> <label for="group-2-checkbox-3"> <span class="icon"> <i class="codicon codicon-check icon-checked"></i> <i class="codicon codicon-chrome-minimize icon-indeterminate"></i> </span> <span class="text">Dolor</span> </label> </div></div> --- ## Page: https://vscode-elements.github.io/elements-lite/components/checkbox/configurator/ ## Configurator Checkbox group Number of checkboxes Group layout Icon Type Checkbox 1 ## CSS .vscode-checkbox { display: inline-flex; position: relative; user-select: none;}.vscode-checkbox input[type="checkbox"] { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}.vscode-checkbox .icon-checked,.vscode-checkbox .icon-indeterminate { display: none; height: 16px; left: 0; position: absolute; top: 0; width: 16px;}.vscode-checkbox .icon-checked,.vscode-checkbox .icon-indeterminate { display: none;}.vscode-checkbox input[type="checkbox"]:checked + label .icon-checked { display: block;}.vscode-checkbox input[type="checkbox"]:indeterminate + label .icon-indeterminate { display: block;}.vscode-checkbox .icon { align-items: center; background-color: var(--vscode-settings-checkboxBackground); background-size: 16px; border: 1px solid var(--vscode-settings-checkboxBorder); border-radius: 3px; box-sizing: border-box; color: var(--vscode-settings-checkboxForeground); display: flex; height: 18px; justify-content: center; margin-left: 0; margin-right: 9px; padding: 0; pointer-events: none; position: relative; width: 18px;}.vscode-checkbox input[type="checkbox"]:invalid + label .icon,.vscode-checkbox input[type="checkbox"].invalid + label .icon { background-color: var(--vscode-inputValidation-errorBackground); border-color: var(--vscode-inputValidation-errorBorder, #be1100);}.vscode-checkbox input[type="checkbox"]:focus + label .icon { border-color: var(--vscode-focusBorder);}.vscode-checkbox label { cursor: pointer; display: inline-flex; line-height: 18px;}.vscode-checkbox .text { opacity: 0.9;}.vscode-checkbox-group { display: flex;}.vscode-checkbox-group .vscode-checkbox { display: block;}.vscode-checkbox-group .vscode-checkbox:not(:last-child) { margin-right: 20px;}.vscode-checkbox-group.vertical { flex-direction: column;}.vscode-checkbox-group .vscode-checkbox { margin-right: 0; margin-bottom: 15px;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/collapsible/ Collapsible is based on the `<details>` HTML element. MDN Reference ## Basic example ## Collapsible Collapsible content. <details class="vscode-collapsible"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible</h2> </summary> <div> <p>Collapsible content.</p> </div></details> ## Initially open ## Collapsible Collapsible content. <details class="vscode-collapsible" open> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible</h2> </summary> <div> <p>Collapsible content.</p> </div></details> ## Description Additional information in the header. It is only visible when component is open. ## Collapsible Collapsible description Collapsible content. <details class="vscode-collapsible"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title"> Collapsible <span class="description">Collapsible description</span> </h2> </summary> <div> <p>Collapsible content.</p> </div></details> ## Actions Actions are clickable buttons in the header when the `Collapsible` component is open and the cursor hovers over it. ## Timeline Collapsible content. <details class="vscode-collapsible"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Timeline</h2> <div class="actions"> <button type="button" class="vscode-action-button" title="New File"> <i class="codicon codicon-new-file" aria-hidden="true"></i> </button> <button type="button" class="vscode-action-button" title="New Folder"> <i class="codicon codicon-new-folder" aria-hidden="true"></i> </button> </div> </summary> <div> <p>Collapsible content.</p> </div></details> ## Always show actions Actions are always visible when `Collapsible` is open. It is intended to reflect the `workbench.view.alwaysShowHeaderActions` option. ## Timeline Collapsible content. <details class="vscode-collapsible always-show-actions"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Timeline</h2> <div class="actions"> <button type="button" class="vscode-action-button" title="New File"> <i class="codicon codicon-new-file" aria-hidden="true"></i> </button> <button type="button" class="vscode-action-button" title="New Folder"> <i class="codicon codicon-new-folder" aria-hidden="true"></i> </button> </div> </summary> <div> <p>Collapsible content.</p> </div></details> ## Exclusive accordion mode Multiple `Collapsible` components connected together, where only one can be open at a time. MDN Reference ## Collapsible 1 Collapsible 1 content. ## Collapsible 2 Collapsible 2 content. ## Collapsible 3 Collapsible 3 content. <details class="vscode-collapsible" name="accordion-example"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible 1</h2> </summary> <div> <p>Collapsible 1 content.</p> </div></details><details class="vscode-collapsible" name="accordion-example"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible 2</h2> </summary> <div> <p>Collapsible 2 content.</p> </div></details><details class="vscode-collapsible" name="accordion-example"> <summary> <i class="codicon codicon-chevron-right icon-arrow"></i> <h2 class="title">Collapsible 3</h2> </summary> <div> <p>Collapsible 3 content.</p> </div></details> --- ## Page: https://vscode-elements.github.io/elements-lite/components/collapsible/configurator/ .vscode-collapsible + .vscode-collapsible { border-top: 1px solid var(--vscode-sideBarSectionHeader-border);}.vscode-collapsible summary { align-items: center; background-color: var(--vscode-sideBarSectionHeader-background); cursor: pointer; display: flex; height: 22px; line-height: 22px; user-select: none;}.vscode-collapsible summary:focus { opacity: 1; outline-offset: -1px; outline-style: solid; outline-width: 1px; outline-color: var(--vscode-focusBorder);}.vscode-collapsible .icon-arrow { display: block; margin: 0 3px;}.vscode-collapsible[open] .icon-arrow { transform: rotate(90deg);}.vscode-collapsible .title { color: var(--vscode-sideBarSectionHeader-foreground); display: block; font-family: var(--vscode-font-family); font-size: 11px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;}.vscode-collapsible .title .description { display: none; font-weight: 400; margin-left: 10px; text-transform: none; opacity: 0.6;}.vscode-collapsible[open] .title .description { display: inline;}.vscode-collapsible .actions { align-items: center; display: none; height: 22px; margin-left: auto; margin-right: 4px;}.vscode-collapsible.always-show-actions[open] summary .actions,.vscode-collapsible[open]:hover summary .actions { display: flex;} --- ## Page: https://vscode-elements.github.io/elements-lite/components/divider/ <hr class="vscode-divider"> --- ## Page: https://vscode-elements.github.io/elements-lite/components/divider/configurator/ * Docs * Configurator ## Configurator There is no configuration options. ## CSS .vscode-divider { background-color: var(--vscode-widget-border); border: 0; display: block; height: 1px; margin-bottom: 10px; margin-top: 10px;}