@natachah/vanilla-frontend 0.4.1 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitlab-ci.yml +22 -13
- package/LICENSE.md +1 -1
- package/docs/.vitepress/config.mts +101 -0
- package/docs/base/layout.md +77 -0
- package/docs/base/media.md +146 -0
- package/docs/base/reset.md +33 -0
- package/docs/base/typography.md +296 -0
- package/docs/classes/badge.md +146 -0
- package/docs/classes/breadcrumb.md +54 -0
- package/docs/classes/card.md +171 -0
- package/docs/classes/dropdown.md +180 -0
- package/docs/classes/grid.md +230 -0
- package/docs/classes/list.md +90 -0
- package/docs/components/button.md +254 -0
- package/docs/components/dialog.md +223 -0
- package/docs/components/disclosure.md +169 -0
- package/docs/components/form.md +514 -0
- package/docs/components/loading.md +53 -0
- package/docs/components/popover.md +270 -0
- package/docs/components/progress.md +33 -0
- package/docs/components/table.md +175 -0
- package/docs/index.md +27 -0
- package/docs/javascript/autofill.md +155 -0
- package/docs/javascript/check.md +53 -0
- package/docs/javascript/comfort.md +125 -0
- package/docs/javascript/consent.md +89 -0
- package/docs/javascript/cookie.md +33 -0
- package/docs/javascript/drawer.md +99 -0
- package/docs/javascript/form.md +130 -0
- package/docs/javascript/scroll.md +104 -0
- package/docs/javascript/slider.md +130 -0
- package/docs/javascript/sortable.md +127 -0
- package/docs/javascript/tabpanel.md +72 -0
- package/docs/javascript/toggle.md +182 -0
- package/docs/javascript/trap.md +33 -0
- package/docs/javascript/tree.md +220 -0
- package/docs/prologue/conventions.md +92 -0
- package/docs/prologue/release.md +44 -0
- package/docs/prologue/upgrade.md +21 -0
- package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
- package/docs/start/customization.md +184 -0
- package/docs/start/install.md +80 -0
- package/docs/start/mixin.md +203 -0
- package/docs/vuejs/ComponentPreview.vue +99 -0
- package/js/_slider.js +17 -1
- package/js/{vanilla-frontend.js → vanilla-frontend-doc.js} +30 -33
- package/natachah-vanilla-frontend-1.0.1.tgz +0 -0
- package/package.json +11 -14
- package/public/404.html +22 -0
- package/public/assets/app.zYBRMlen.js +1 -0
- package/public/assets/base_layout.md.DPVON1Hq.js +13 -0
- package/public/assets/base_layout.md.DPVON1Hq.lean.js +1 -0
- package/public/assets/base_media.md.DHSlU0g6.js +24 -0
- package/public/assets/base_media.md.DHSlU0g6.lean.js +1 -0
- package/public/assets/base_reset.md.DD9AA1li.js +3 -0
- package/public/assets/base_reset.md.DD9AA1li.lean.js +1 -0
- package/public/assets/base_typography.md.C9BVN1Re.js +87 -0
- package/public/assets/base_typography.md.C9BVN1Re.lean.js +1 -0
- package/public/assets/chunks/ComponentPreview.Cw4G3qNN.js +27 -0
- package/public/assets/chunks/framework.26dFs73Q.js +4 -0
- package/public/assets/chunks/theme.D1Tljxds.js +1 -0
- package/public/assets/classes_badge.md.EznZXXqT.js +24 -0
- package/public/assets/classes_badge.md.EznZXXqT.lean.js +1 -0
- package/public/assets/classes_breadcrumb.md.DrzF9h9m.js +15 -0
- package/public/assets/classes_breadcrumb.md.DrzF9h9m.lean.js +1 -0
- package/public/assets/classes_card.md.BzNZEHe9.js +41 -0
- package/public/assets/classes_card.md.BzNZEHe9.lean.js +1 -0
- package/public/assets/classes_dropdown.md.CKZ2tv7T.js +70 -0
- package/public/assets/classes_dropdown.md.CKZ2tv7T.lean.js +1 -0
- package/public/assets/classes_grid.md.CKCvlWAg.js +45 -0
- package/public/assets/classes_grid.md.CKCvlWAg.lean.js +1 -0
- package/public/assets/classes_list.md.CjyB8PFK.js +36 -0
- package/public/assets/classes_list.md.CjyB8PFK.lean.js +1 -0
- package/public/assets/components_button.md.CX41PJBd.js +45 -0
- package/public/assets/components_button.md.CX41PJBd.lean.js +1 -0
- package/public/assets/components_dialog.md.JMjidrIE.js +76 -0
- package/public/assets/components_dialog.md.JMjidrIE.lean.js +1 -0
- package/public/assets/components_disclosure.md.BwvLkFL_.js +53 -0
- package/public/assets/components_disclosure.md.BwvLkFL_.lean.js +1 -0
- package/public/assets/components_form.md.C6B5z_6G.js +122 -0
- package/public/assets/components_form.md.C6B5z_6G.lean.js +1 -0
- package/public/assets/components_loading.md.51ktm2_l.js +4 -0
- package/public/assets/components_loading.md.51ktm2_l.lean.js +1 -0
- package/public/assets/components_popover.md.DpbAjVUj.js +102 -0
- package/public/assets/components_popover.md.DpbAjVUj.lean.js +1 -0
- package/public/assets/components_progress.md.H7v6t9h-.js +6 -0
- package/public/assets/components_progress.md.H7v6t9h-.lean.js +1 -0
- package/public/assets/components_table.md.BPrpvUDy.js +75 -0
- package/public/assets/components_table.md.BPrpvUDy.lean.js +1 -0
- package/public/assets/index.md.DNiLOsZD.js +1 -0
- package/public/assets/index.md.DNiLOsZD.lean.js +1 -0
- package/public/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2 +0 -0
- package/public/assets/inter-italic-cyrillic.D7dRslh9.woff2 +0 -0
- package/public/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2 +0 -0
- package/public/assets/inter-italic-greek.DNcpQ8QC.woff2 +0 -0
- package/public/assets/inter-italic-latin-ext.DytegdRQ.woff2 +0 -0
- package/public/assets/inter-italic-latin.COaG5lWR.woff2 +0 -0
- package/public/assets/inter-italic-vietnamese.BI5UxJD-.woff2 +0 -0
- package/public/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2 +0 -0
- package/public/assets/inter-roman-cyrillic.CD0kT8R4.woff2 +0 -0
- package/public/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2 +0 -0
- package/public/assets/inter-roman-greek.Dsf7YjP7.woff2 +0 -0
- package/public/assets/inter-roman-latin-ext.Dl_ayf4-.woff2 +0 -0
- package/public/assets/inter-roman-latin.Cy4MYw_J.woff2 +0 -0
- package/public/assets/inter-roman-vietnamese.CpqCnS2H.woff2 +0 -0
- package/public/assets/javascript_autofill.md.HyVx8c7W.js +49 -0
- package/public/assets/javascript_autofill.md.HyVx8c7W.lean.js +1 -0
- package/public/assets/javascript_check.md.BCbZtUBE.js +13 -0
- package/public/assets/javascript_check.md.BCbZtUBE.lean.js +1 -0
- package/public/assets/javascript_comfort.md.CQm191VA.js +20 -0
- package/public/assets/javascript_comfort.md.CQm191VA.lean.js +1 -0
- package/public/assets/javascript_consent.md.CbDzabMd.js +29 -0
- package/public/assets/javascript_consent.md.CbDzabMd.lean.js +1 -0
- package/public/assets/javascript_cookie.md.CFVe2JRe.js +2 -0
- package/public/assets/javascript_cookie.md.CFVe2JRe.lean.js +1 -0
- package/public/assets/javascript_drawer.md.D_pT0mrZ.js +32 -0
- package/public/assets/javascript_drawer.md.D_pT0mrZ.lean.js +1 -0
- package/public/assets/javascript_form.md.sGYh1L4I.js +40 -0
- package/public/assets/javascript_form.md.sGYh1L4I.lean.js +2 -0
- package/public/assets/javascript_scroll.md.DeOZ4grw.js +30 -0
- package/public/assets/javascript_scroll.md.DeOZ4grw.lean.js +1 -0
- package/public/assets/javascript_slider.md.CIa7pHr9.js +27 -0
- package/public/assets/javascript_slider.md.CIa7pHr9.lean.js +1 -0
- package/public/assets/javascript_sortable.md.CThHVTgW.js +35 -0
- package/public/assets/javascript_sortable.md.CThHVTgW.lean.js +1 -0
- package/public/assets/javascript_tabpanel.md.CxAFdAGU.js +19 -0
- package/public/assets/javascript_tabpanel.md.CxAFdAGU.lean.js +1 -0
- package/public/assets/javascript_toggle.md.C66hpUWF.js +46 -0
- package/public/assets/javascript_toggle.md.C66hpUWF.lean.js +1 -0
- package/public/assets/javascript_trap.md.Dt2Rt__e.js +2 -0
- package/public/assets/javascript_trap.md.Dt2Rt__e.lean.js +1 -0
- package/public/assets/javascript_tree.md.COR-Pj1y.js +72 -0
- package/public/assets/javascript_tree.md.COR-Pj1y.lean.js +1 -0
- package/public/assets/prologue_conventions.md.wCplqeKt.js +34 -0
- package/public/assets/prologue_conventions.md.wCplqeKt.lean.js +1 -0
- package/public/assets/prologue_release.md.CBJGKY_Y.js +1 -0
- package/public/assets/prologue_release.md.CBJGKY_Y.lean.js +1 -0
- package/public/assets/prologue_upgrade.md.E_0GNNE2.js +1 -0
- package/public/assets/prologue_upgrade.md.E_0GNNE2.lean.js +1 -0
- package/public/assets/start_customization.md.C4fmzVYD.js +141 -0
- package/public/assets/start_customization.md.C4fmzVYD.lean.js +1 -0
- package/public/assets/start_install.md.vqLh01mm.js +46 -0
- package/public/assets/start_install.md.vqLh01mm.lean.js +1 -0
- package/public/assets/start_mixin.md.B5VMlbiN.js +85 -0
- package/public/assets/start_mixin.md.B5VMlbiN.lean.js +1 -0
- package/public/assets/style.Dl6gCPEE.css +1 -0
- package/public/base/layout.html +37 -0
- package/public/base/media.html +179 -0
- package/public/base/reset.html +27 -0
- package/public/base/typography.html +320 -0
- package/public/bundles/vanilla-frontend-doc.css +1 -0
- package/public/bundles/vanilla-frontend-doc.js +1 -0
- package/public/bundles/vanilla-frontend.css +1 -0
- package/public/classes/badge.html +205 -0
- package/public/classes/breadcrumb.html +66 -0
- package/public/classes/card.html +222 -0
- package/public/classes/dropdown.html +147 -0
- package/public/classes/grid.html +278 -0
- package/public/classes/list.html +113 -0
- package/public/components/button.html +304 -0
- package/public/components/dialog.html +205 -0
- package/public/components/disclosure.html +130 -0
- package/public/components/form.html +589 -0
- package/public/components/loading.html +107 -0
- package/public/components/popover.html +257 -0
- package/public/components/progress.html +57 -0
- package/public/components/table.html +152 -0
- package/public/demo/demo.html +84 -0
- package/public/hashmap.json +1 -0
- package/public/index.html +25 -0
- package/public/javascript/autofill.html +152 -0
- package/public/javascript/check.html +64 -0
- package/public/javascript/comfort.html +123 -0
- package/public/javascript/consent.html +80 -0
- package/public/javascript/cookie.html +26 -0
- package/public/javascript/drawer.html +83 -0
- package/public/javascript/form.html +117 -0
- package/public/javascript/scroll.html +81 -0
- package/public/javascript/slider.html +78 -0
- package/public/javascript/sortable.html +112 -0
- package/public/javascript/tabpanel.html +70 -0
- package/public/javascript/toggle.html +201 -0
- package/public/javascript/trap.html +26 -0
- package/public/javascript/tree.html +175 -0
- package/public/prologue/conventions.html +58 -0
- package/public/prologue/release.html +25 -0
- package/public/prologue/upgrade.html +25 -0
- package/public/start/customization.html +165 -0
- package/public/start/install.html +70 -0
- package/public/start/mixin.html +109 -0
- package/public/vp-icons.css +0 -0
- package/sandbox/index.html +27 -0
- package/sandbox/js/sandbox-header.js +57 -0
- package/sandbox/js/sandbox-test.js +112 -0
- package/sandbox/pages/base/layout.html +80 -0
- package/sandbox/pages/base/media.html +52 -0
- package/sandbox/pages/base/typography.html +132 -0
- package/sandbox/pages/components/button.html +70 -0
- package/sandbox/pages/components/dialog.html +72 -0
- package/sandbox/pages/components/disclosure.html +77 -0
- package/sandbox/pages/components/form.html +164 -0
- package/sandbox/pages/components/loading.html +32 -0
- package/sandbox/pages/components/popover.html +119 -0
- package/sandbox/pages/components/progress.html +28 -0
- package/sandbox/pages/components/table.html +80 -0
- package/sandbox/pages/customs/badge.html +59 -0
- package/sandbox/pages/customs/breadcrumb.html +34 -0
- package/sandbox/pages/customs/card.html +71 -0
- package/sandbox/pages/customs/dropdown.html +70 -0
- package/sandbox/pages/customs/grid.html +109 -0
- package/sandbox/pages/customs/list.html +43 -0
- package/sandbox/pages/javascript/autofill.html +39 -0
- package/sandbox/pages/javascript/checkall.html +37 -0
- package/sandbox/pages/javascript/comfort.html +41 -0
- package/sandbox/pages/javascript/consent.html +45 -0
- package/sandbox/pages/javascript/form.html +51 -0
- package/sandbox/pages/javascript/scroll.html +44 -0
- package/sandbox/pages/javascript/slider.html +44 -0
- package/sandbox/pages/javascript/sortable.html +56 -0
- package/sandbox/pages/javascript/tabpanel.html +39 -0
- package/sandbox/pages/javascript/toggle.html +72 -0
- package/sandbox/pages/javascript/tree.html +96 -0
- package/sandbox/sandbox.js +26 -0
- package/sandbox/scss/sandbox-header.scss +93 -0
- package/scss/base/_layout.scss +1 -0
- package/scss/base/_reset.scss +5 -0
- package/scss/components/_badge.scss +2 -1
- package/scss/components/_dropdown.scss +2 -2
- package/scss/components/_group.scss +8 -4
- package/scss/components/_popover.scss +74 -0
- package/scss/components/index.scss +1 -0
- package/scss/vanilla-frontend-doc.scss +46 -1
- package/scss/vanilla-frontend-sandbox.scss +34 -0
- package/vite.config.js +30 -0
- package/docs/index.html +0 -36
- package/docs/main-demo.js +0 -2
- package/docs/main.js +0 -34
- package/docs/pages/base/layout.html +0 -131
- package/docs/pages/base/media.html +0 -142
- package/docs/pages/base/reset.html +0 -53
- package/docs/pages/base/typography.html +0 -334
- package/docs/pages/components/button.html +0 -202
- package/docs/pages/components/dialog.html +0 -336
- package/docs/pages/components/disclosure.html +0 -174
- package/docs/pages/components/form.html +0 -427
- package/docs/pages/components/loading.html +0 -58
- package/docs/pages/components/progress.html +0 -47
- package/docs/pages/components/table.html +0 -168
- package/docs/pages/customs/badge.html +0 -150
- package/docs/pages/customs/breadcrumb.html +0 -67
- package/docs/pages/customs/card.html +0 -185
- package/docs/pages/customs/drawer.html +0 -149
- package/docs/pages/customs/dropdown.html +0 -270
- package/docs/pages/customs/grid.html +0 -185
- package/docs/pages/customs/list.html +0 -112
- package/docs/pages/customs/slider.html +0 -273
- package/docs/pages/javascript/autofill.html +0 -170
- package/docs/pages/javascript/checkall.html +0 -59
- package/docs/pages/javascript/comfort.html +0 -146
- package/docs/pages/javascript/consent.html +0 -112
- package/docs/pages/javascript/cookie.html +0 -81
- package/docs/pages/javascript/form.html +0 -199
- package/docs/pages/javascript/scroll.html +0 -209
- package/docs/pages/javascript/sortable.html +0 -167
- package/docs/pages/javascript/tabpanel.html +0 -89
- package/docs/pages/javascript/toggle.html +0 -193
- package/docs/pages/javascript/trap.html +0 -89
- package/docs/pages/javascript/tree.html +0 -256
- package/docs/pages/quick-start/conventions.html +0 -112
- package/docs/pages/quick-start/customization.html +0 -187
- package/docs/pages/quick-start/installation.html +0 -97
- package/docs/pages/quick-start/mixins.html +0 -214
- package/docs/src/js/demo.js +0 -110
- package/docs/src/js/doc-code.js +0 -102
- package/docs/src/js/doc-demo.js +0 -14
- package/docs/src/js/doc-layout.js +0 -117
- package/docs/src/scss/demo.scss +0 -77
- package/docs/src/scss/layout.scss +0 -83
- package/docs/src/scss/style.scss +0 -278
- package/docs/vite.config.mjs +0 -23
- package/esbuild.mjs +0 -25
- package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
- package/vitest.config.js +0 -8
|
@@ -0,0 +1,589 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-US" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<title>Form | Vanilla Frontend</title>
|
|
7
|
+
<meta name="description" content="Documentation of my package">
|
|
8
|
+
<meta name="generator" content="VitePress v2.0.0-alpha.17">
|
|
9
|
+
<link rel="preload stylesheet" href="/assets/style.Dl6gCPEE.css" as="style">
|
|
10
|
+
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
|
|
11
|
+
|
|
12
|
+
<script type="module" src="/assets/app.zYBRMlen.js"></script>
|
|
13
|
+
<link rel="preload" href="/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
+
<link rel="modulepreload" href="/assets/chunks/theme.D1Tljxds.js">
|
|
15
|
+
<link rel="modulepreload" href="/assets/chunks/framework.26dFs73Q.js">
|
|
16
|
+
<link rel="modulepreload" href="/assets/chunks/ComponentPreview.Cw4G3qNN.js">
|
|
17
|
+
<link rel="modulepreload" href="/assets/components_form.md.C6B5z_6G.lean.js">
|
|
18
|
+
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
19
|
+
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<div id="app"><div class="Layout" data-v-0cf61682><!--[--><!--]--><!--[--><span tabindex="-1" data-v-331ec75c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-331ec75c>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0cf61682 data-v-9f75dce3><div class="VPNavBar has-sidebar top" data-v-9f75dce3 data-v-9ca1369d><div class="wrapper" data-v-9ca1369d><div class="container" data-v-9ca1369d><div class="title" data-v-9ca1369d><div class="VPNavBarTitle has-sidebar" data-v-9ca1369d data-v-1e38c6bc><a class="title" href="/" data-v-1e38c6bc><!--[--><!--]--><!----><span data-v-1e38c6bc>Vanilla Frontend</span><!--[--><!--]--></a></div></div><div class="content" data-v-9ca1369d><div class="content-body" data-v-9ca1369d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9ca1369d data-v-2fc7f2c6><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9ca1369d data-v-39714824><span id="main-nav-aria-label" class="visually-hidden" data-v-39714824> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-39714824 data-v-6dd25bb8><!--[--><span data-v-6dd25bb8>Home</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9ca1369d data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9ca1369d data-v-0394ad82 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Gitlab" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9ca1369d data-v-562c832a data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-42cb505d><span class="vpi-more-horizontal icon" data-v-42cb505d></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><!----><!--[--><!--[--><!----><div class="group" data-v-562c832a><div class="item appearance" data-v-562c832a><p class="label" data-v-562c832a>Appearance</p><div class="appearance-action" data-v-562c832a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-562c832a data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-562c832a><div class="item social-links" data-v-562c832a><div class="VPSocialLinks social-links-list" data-v-562c832a data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Gitlab" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9ca1369d data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-9ca1369d><div class="divider-line" data-v-9ca1369d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0cf61682 data-v-db738f89><div class="container" data-v-db738f89><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-db738f89><span class="vpi-align-left menu-icon" data-v-db738f89></span><span class="menu-text" data-v-db738f89>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-db738f89 data-v-0bf0e06f><button data-v-0bf0e06f>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0cf61682 data-v-af661f50><div class="curtain" data-v-af661f50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af661f50><span class="visually-hidden" id="sidebar-aria-label" data-v-af661f50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Prologue</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/release.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Release Notes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/upgrade.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Upgrade guide</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/conventions.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Quick start</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/install.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/customization.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Customization</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/mixin.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>SCSS mixin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Base</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/reset.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Reset</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/layout.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/typography.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Typography</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/media.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Media</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0 has-active" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/button.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/dialog.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/disclosure.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Disclosure</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/form.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/loading.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Loading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/popover.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Popover</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/progress.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/table.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Table</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Class components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/badge.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/breadcrumb.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/card.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/dropdown.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/grid.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/list.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>List</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Javascript</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/autofill.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Autofill</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/check.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Check all</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/comfort.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Comfort</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/consent.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Consent</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/cookie.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Cookie</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/drawer.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/form.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Form helper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/scroll.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Scroll</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/slider.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/sortable.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Sortable</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/tabpanel.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Tabpanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/toggle.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Toggle</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/trap.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Trap</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/tree.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Tree</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0cf61682 data-v-9dc86fcc><div class="VPDoc has-sidebar has-aside" data-v-9dc86fcc data-v-7011f0d8><!--[--><!--]--><div class="container" data-v-7011f0d8><div class="aside" data-v-7011f0d8><div class="aside-curtain" data-v-7011f0d8></div><div class="aside-container" data-v-7011f0d8><div class="aside-content" data-v-7011f0d8><div class="VPDocAside" data-v-7011f0d8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-60d5052e><div class="content" data-v-60d5052e><div class="outline-marker" data-v-60d5052e></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-60d5052e>On this page</div><ul class="VPDocOutlineItem root" data-v-60d5052e data-v-1ce71065><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7011f0d8><div class="content-container" data-v-7011f0d8><!--[--><!--]--><main class="main" data-v-7011f0d8><div style="position:relative;" class="vp-doc _components_form" data-v-7011f0d8><div><h1 id="form" tabindex="-1">Form <a class="header-anchor" href="#form" aria-label="Permalink to “Form”"></a></h1><p>All form elements are fully responsive with pure semantic HTML, enabling forms to scale gracefully across devices and viewports.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@natachah/vanilla-frontend/scss/components/form'</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”"></a></h2><p>The form is using the native <code><label></code>, <code><input></code> and co. tags.</p><!--[--><iframe srcdoc="
|
|
23
|
+
<!DOCTYPE html>
|
|
24
|
+
<html>
|
|
25
|
+
<head>
|
|
26
|
+
<meta charset="utf-8">
|
|
27
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
28
|
+
<style>
|
|
29
|
+
html[data-theme=light] .demo-theme {
|
|
30
|
+
color: black;
|
|
31
|
+
background: white
|
|
32
|
+
}
|
|
33
|
+
html[data-theme=dark] .demo-theme {
|
|
34
|
+
color: white;
|
|
35
|
+
background: black
|
|
36
|
+
}
|
|
37
|
+
body {
|
|
38
|
+
padding:1rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
</style>
|
|
42
|
+
</head>
|
|
43
|
+
<body>
|
|
44
|
+
|
|
45
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
48
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><label for="demoInput">Input</label><input type="text" id="demoInput" name="input" placeholder="My input" aria-describedby="demoInputDescription"><small id="demoInputDescription"> Must be at least 8 characters. </small><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"demoInput"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Input</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"demoInput"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"input"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My input"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-describedby</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"demoInputDescription"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"demoInputDescription"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Must be at least 8 characters.</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-color</span></span>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-background</span></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-border-size</span></span>
|
|
55
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-border-style</span></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-border-color</span></span>
|
|
57
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-border-radius</span></span>
|
|
58
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-padding-inline</span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-padding-block</span></span>
|
|
60
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-transition</span></span>
|
|
61
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-decoration</span></span></code></pre></div></div></div><h3 id="inputs" tabindex="-1">Inputs <a class="header-anchor" href="#inputs" aria-label="Permalink to “Inputs”"></a></h3><!--[--><iframe srcdoc="
|
|
62
|
+
<!DOCTYPE html>
|
|
63
|
+
<html>
|
|
64
|
+
<head>
|
|
65
|
+
<meta charset="utf-8">
|
|
66
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
67
|
+
<style>
|
|
68
|
+
html[data-theme=light] .demo-theme {
|
|
69
|
+
color: black;
|
|
70
|
+
background: white
|
|
71
|
+
}
|
|
72
|
+
html[data-theme=dark] .demo-theme {
|
|
73
|
+
color: white;
|
|
74
|
+
background: black
|
|
75
|
+
}
|
|
76
|
+
body {
|
|
77
|
+
padding:1rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
</style>
|
|
81
|
+
</head>
|
|
82
|
+
<body>
|
|
83
|
+
|
|
84
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="text" name="text" placeholder="Some text"><input type="search" name="search" placeholder="Enter some keyword"><input type="email" name="email" placeholder="info@something.com"><input type="url" name="url" placeholder="http://www.google.com"><input type="tel" name="tel" placeholder="021 922 00 00"><input type="number" name="number" placeholder="42"><input type="password" name="password" placeholder="123456"><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Some text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
88
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"search"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"search"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Enter some keyword"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
89
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"email"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"email"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"info@something.com"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
90
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"url"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"url"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"http://www.google.com"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
91
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"tel"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"tel"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"021 922 00 00"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
92
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"number"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"number"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"42"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
93
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"password"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"password"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"123456"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>The type <strong>file</strong> come with a default icon and no button.</p><!--[--><iframe srcdoc="
|
|
94
|
+
<!DOCTYPE html>
|
|
95
|
+
<html>
|
|
96
|
+
<head>
|
|
97
|
+
<meta charset="utf-8">
|
|
98
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
99
|
+
<style>
|
|
100
|
+
html[data-theme=light] .demo-theme {
|
|
101
|
+
color: black;
|
|
102
|
+
background: white
|
|
103
|
+
}
|
|
104
|
+
html[data-theme=dark] .demo-theme {
|
|
105
|
+
color: white;
|
|
106
|
+
background: black
|
|
107
|
+
}
|
|
108
|
+
body {
|
|
109
|
+
padding:1rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
</style>
|
|
113
|
+
</head>
|
|
114
|
+
<body>
|
|
115
|
+
|
|
116
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
|
119
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="file" name="file" accept="image/png, image/jpeg"><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-28" id="tab-29" checked><label data-title="html" for="tab-29">html</label><input type="radio" name="group-28" id="tab-30"><label data-title="css property" for="tab-30">css property</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"file"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"file"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> accept</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"image/png, image/jpeg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-file</span></span></code></pre></div></div></div><p>The type <strong>date</strong>, <strong>time</strong> and <strong>datetime-local</strong> come with default icon.</p><!--[--><iframe srcdoc="
|
|
120
|
+
<!DOCTYPE html>
|
|
121
|
+
<html>
|
|
122
|
+
<head>
|
|
123
|
+
<meta charset="utf-8">
|
|
124
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
125
|
+
<style>
|
|
126
|
+
html[data-theme=light] .demo-theme {
|
|
127
|
+
color: black;
|
|
128
|
+
background: white
|
|
129
|
+
}
|
|
130
|
+
html[data-theme=dark] .demo-theme {
|
|
131
|
+
color: white;
|
|
132
|
+
background: black
|
|
133
|
+
}
|
|
134
|
+
body {
|
|
135
|
+
padding:1rem;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
</style>
|
|
139
|
+
</head>
|
|
140
|
+
<body>
|
|
141
|
+
|
|
142
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
|
145
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="date" name="date"><input type="time" name="time"><input type="datetime-local" name="datetime"><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-36" id="tab-37" checked><label data-title="html" for="tab-37">html</label><input type="radio" name="group-36" id="tab-38"><label data-title="css properties" for="tab-38">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"date"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"date"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
146
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"time"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"time"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
147
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datetime-local"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datetime"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-date</span></span>
|
|
148
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-time</span></span></code></pre></div></div></div><p>The type <strong>color</strong> is also consistent with the other input types.</p><!--[--><iframe srcdoc="
|
|
149
|
+
<!DOCTYPE html>
|
|
150
|
+
<html>
|
|
151
|
+
<head>
|
|
152
|
+
<meta charset="utf-8">
|
|
153
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
154
|
+
<style>
|
|
155
|
+
html[data-theme=light] .demo-theme {
|
|
156
|
+
color: black;
|
|
157
|
+
background: white
|
|
158
|
+
}
|
|
159
|
+
html[data-theme=dark] .demo-theme {
|
|
160
|
+
color: white;
|
|
161
|
+
background: black
|
|
162
|
+
}
|
|
163
|
+
body {
|
|
164
|
+
padding:1rem;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
</style>
|
|
168
|
+
</head>
|
|
169
|
+
<body>
|
|
170
|
+
|
|
171
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
172
|
+
</body>
|
|
173
|
+
</html>
|
|
174
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="color" name="color"><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"color"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"color"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>The <strong>range</strong> field look more like a progress bar.</p><!--[--><iframe srcdoc="
|
|
175
|
+
<!DOCTYPE html>
|
|
176
|
+
<html>
|
|
177
|
+
<head>
|
|
178
|
+
<meta charset="utf-8">
|
|
179
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
180
|
+
<style>
|
|
181
|
+
html[data-theme=light] .demo-theme {
|
|
182
|
+
color: black;
|
|
183
|
+
background: white
|
|
184
|
+
}
|
|
185
|
+
html[data-theme=dark] .demo-theme {
|
|
186
|
+
color: white;
|
|
187
|
+
background: black
|
|
188
|
+
}
|
|
189
|
+
body {
|
|
190
|
+
padding:1rem;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
</style>
|
|
194
|
+
</head>
|
|
195
|
+
<body>
|
|
196
|
+
|
|
197
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
198
|
+
</body>
|
|
199
|
+
</html>
|
|
200
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="range" name="range" min="0" max="10"><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"range"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"range"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"10"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="textarea" tabindex="-1">Textarea <a class="header-anchor" href="#textarea" aria-label="Permalink to “Textarea”"></a></h3><p>The native <code><textarea></code> is styled like the input for consistency.</p><p>By default you only can resize the height.</p><!--[--><iframe srcdoc="
|
|
201
|
+
<!DOCTYPE html>
|
|
202
|
+
<html>
|
|
203
|
+
<head>
|
|
204
|
+
<meta charset="utf-8">
|
|
205
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
206
|
+
<style>
|
|
207
|
+
html[data-theme=light] .demo-theme {
|
|
208
|
+
color: black;
|
|
209
|
+
background: white
|
|
210
|
+
}
|
|
211
|
+
html[data-theme=dark] .demo-theme {
|
|
212
|
+
color: white;
|
|
213
|
+
background: black
|
|
214
|
+
}
|
|
215
|
+
body {
|
|
216
|
+
padding:1rem;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
</style>
|
|
220
|
+
</head>
|
|
221
|
+
<body>
|
|
222
|
+
|
|
223
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
224
|
+
</body>
|
|
225
|
+
</html>
|
|
226
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><textarea name="textarea" rows="5" cols="33">It was a dark and stormy night...</textarea><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"textarea"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rows</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"5"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> cols</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"33"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>It was a dark and stormy night...</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="select" tabindex="-1">Select <a class="header-anchor" href="#select" aria-label="Permalink to “Select”"></a></h3><p>The native <code><select></code> is styled like the input for consistency.</p><!--[--><iframe srcdoc="
|
|
227
|
+
<!DOCTYPE html>
|
|
228
|
+
<html>
|
|
229
|
+
<head>
|
|
230
|
+
<meta charset="utf-8">
|
|
231
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
232
|
+
<style>
|
|
233
|
+
html[data-theme=light] .demo-theme {
|
|
234
|
+
color: black;
|
|
235
|
+
background: white
|
|
236
|
+
}
|
|
237
|
+
html[data-theme=dark] .demo-theme {
|
|
238
|
+
color: white;
|
|
239
|
+
background: black
|
|
240
|
+
}
|
|
241
|
+
body {
|
|
242
|
+
padding:1rem;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
</style>
|
|
246
|
+
</head>
|
|
247
|
+
<body>
|
|
248
|
+
|
|
249
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
250
|
+
</body>
|
|
251
|
+
</html>
|
|
252
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><select name="select"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option></select><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-68" id="tab-69" checked><label data-title="html" for="tab-69">html</label><input type="radio" name="group-68" id="tab-70"><label data-title="css property" for="tab-70">css property</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"select"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
253
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>One</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
254
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Two</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
255
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Three</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
256
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"4"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Four</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
257
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-select</span></span></code></pre></div></div></div><h3 id="radio" tabindex="-1">Radio <a class="header-anchor" href="#radio" aria-label="Permalink to “Radio”"></a></h3><p>The radio field must be inside a <code><fieldset></code>.</p><!--[--><iframe srcdoc="
|
|
258
|
+
<!DOCTYPE html>
|
|
259
|
+
<html>
|
|
260
|
+
<head>
|
|
261
|
+
<meta charset="utf-8">
|
|
262
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
263
|
+
<style>
|
|
264
|
+
html[data-theme=light] .demo-theme {
|
|
265
|
+
color: black;
|
|
266
|
+
background: white
|
|
267
|
+
}
|
|
268
|
+
html[data-theme=dark] .demo-theme {
|
|
269
|
+
color: white;
|
|
270
|
+
background: black
|
|
271
|
+
}
|
|
272
|
+
body {
|
|
273
|
+
padding:1rem;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
</style>
|
|
277
|
+
</head>
|
|
278
|
+
<body>
|
|
279
|
+
|
|
280
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
281
|
+
</body>
|
|
282
|
+
</html>
|
|
283
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><fieldset><legend>Radio</legend><input type="radio" id="radioA" name="radio" checked> <label for="radioA">Option A</label><input type="radio" id="radioB" name="radio"> <label for="radioB">Option B</label><input type="radio" id="radioC" name="radio"> <label for="radioC">Option C</label></fieldset><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-79" id="tab-80" checked><label data-title="html" for="tab-80">html</label><input type="radio" name="group-79" id="tab-81"><label data-title="css property" for="tab-81">css property</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
284
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Radio</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
285
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioA"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option A</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
286
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioB"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioB"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option B</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
287
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioC"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioC"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option C</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
288
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-radio</span></span>
|
|
289
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-active-background</span></span>
|
|
290
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-active-border-color</span></span></code></pre></div></div></div><p>To display the element into the vertical, surround the <code><input></code> and the <code><label></code> by a <code><div></code> tag.</p><!--[--><iframe srcdoc="
|
|
291
|
+
<!DOCTYPE html>
|
|
292
|
+
<html>
|
|
293
|
+
<head>
|
|
294
|
+
<meta charset="utf-8">
|
|
295
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
296
|
+
<style>
|
|
297
|
+
html[data-theme=light] .demo-theme {
|
|
298
|
+
color: black;
|
|
299
|
+
background: white
|
|
300
|
+
}
|
|
301
|
+
html[data-theme=dark] .demo-theme {
|
|
302
|
+
color: white;
|
|
303
|
+
background: black
|
|
304
|
+
}
|
|
305
|
+
body {
|
|
306
|
+
padding:1rem;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
</style>
|
|
310
|
+
</head>
|
|
311
|
+
<body>
|
|
312
|
+
|
|
313
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
314
|
+
</body>
|
|
315
|
+
</html>
|
|
316
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><fieldset><legend>Radio</legend><div><input type="radio" id="radioD" name="radio" checked> <label for="radioD">Option D</label></div><div><input type="radio" id="radioE" name="radio"> <label for="radioE">Option E</label></div><div><input type="radio" id="radioF" name="radio"> <label for="radioF">Option F</label></div></fieldset><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
317
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Radio</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
318
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
319
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioD"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioD"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option D</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
320
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
321
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
322
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioE"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioE"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option E</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
323
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
324
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
325
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioF"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radioF"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option F</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
326
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
327
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="checkbox" tabindex="-1">Checkbox <a class="header-anchor" href="#checkbox" aria-label="Permalink to “Checkbox”"></a></h3><p>The checkbox field must be inside a <code><fieldset></code>.</p><!--[--><iframe srcdoc="
|
|
328
|
+
<!DOCTYPE html>
|
|
329
|
+
<html>
|
|
330
|
+
<head>
|
|
331
|
+
<meta charset="utf-8">
|
|
332
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
333
|
+
<style>
|
|
334
|
+
html[data-theme=light] .demo-theme {
|
|
335
|
+
color: black;
|
|
336
|
+
background: white
|
|
337
|
+
}
|
|
338
|
+
html[data-theme=dark] .demo-theme {
|
|
339
|
+
color: white;
|
|
340
|
+
background: black
|
|
341
|
+
}
|
|
342
|
+
body {
|
|
343
|
+
padding:1rem;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
</style>
|
|
347
|
+
</head>
|
|
348
|
+
<body>
|
|
349
|
+
|
|
350
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
351
|
+
</body>
|
|
352
|
+
</html>
|
|
353
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><fieldset><legend>Checkbox</legend><input type="checkbox" id="checkboxA" name="checkboxA" checked> <label for="checkboxA">Option A</label><input type="checkbox" id="checkboxB" name="checkboxB"> <label for="checkboxB">Option B</label><input type="checkbox" id="checkboxC" name="checkboxC"> <label for="checkboxC">Option C</label></fieldset><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-95" id="tab-96" checked><label data-title="html" for="tab-96">html</label><input type="radio" name="group-95" id="tab-97"><label data-title="css property" for="tab-97">css property</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
354
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Checkbox</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
355
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxA"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxA"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option A</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
356
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxB"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxB"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxB"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option B</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
357
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxC"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxC"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxC"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option C</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
358
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-check</span></span>
|
|
359
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-active-background</span></span>
|
|
360
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-active-border-color</span></span></code></pre></div></div></div><p>To display the element into the vertical, surround the <code><input></code> and the <code><label></code> by a <code><div></code> tag.</p><!--[--><iframe srcdoc="
|
|
361
|
+
<!DOCTYPE html>
|
|
362
|
+
<html>
|
|
363
|
+
<head>
|
|
364
|
+
<meta charset="utf-8">
|
|
365
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
366
|
+
<style>
|
|
367
|
+
html[data-theme=light] .demo-theme {
|
|
368
|
+
color: black;
|
|
369
|
+
background: white
|
|
370
|
+
}
|
|
371
|
+
html[data-theme=dark] .demo-theme {
|
|
372
|
+
color: white;
|
|
373
|
+
background: black
|
|
374
|
+
}
|
|
375
|
+
body {
|
|
376
|
+
padding:1rem;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
</style>
|
|
380
|
+
</head>
|
|
381
|
+
<body>
|
|
382
|
+
|
|
383
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
384
|
+
</body>
|
|
385
|
+
</html>
|
|
386
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><fieldset><legend>Radio</legend><div><input type="checkbox" id="checkboxD" name="checkbox" checked> <label for="checkboxD">Option D</label></div><div><input type="checkbox" id="checkboxE" name="checkbox"> <label for="checkboxE">Option E</label></div><div><input type="checkbox" id="checkboxF" name="checkbox"> <label for="checkboxF">Option F</label></div></fieldset><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
387
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Radio</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
388
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
389
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxD"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxD"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option D</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
390
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
391
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
392
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxE"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxE"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option E</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
393
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
394
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
395
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxF"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkboxF"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Option F</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
396
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
397
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="switch" tabindex="-1">Switch <a class="header-anchor" href="#switch" aria-label="Permalink to “Switch”"></a></h3><p>The checkbox with the <code>role="switch"</code> attribute will render a switch component.</p><!--[--><iframe srcdoc="
|
|
398
|
+
<!DOCTYPE html>
|
|
399
|
+
<html>
|
|
400
|
+
<head>
|
|
401
|
+
<meta charset="utf-8">
|
|
402
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
403
|
+
<style>
|
|
404
|
+
html[data-theme=light] .demo-theme {
|
|
405
|
+
color: black;
|
|
406
|
+
background: white
|
|
407
|
+
}
|
|
408
|
+
html[data-theme=dark] .demo-theme {
|
|
409
|
+
color: white;
|
|
410
|
+
background: black
|
|
411
|
+
}
|
|
412
|
+
body {
|
|
413
|
+
padding:1rem;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
</style>
|
|
417
|
+
</head>
|
|
418
|
+
<body>
|
|
419
|
+
|
|
420
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
421
|
+
</body>
|
|
422
|
+
</html>
|
|
423
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-111" id="tab-112" checked><label data-title="html" for="tab-112">html</label><input type="radio" name="group-111" id="tab-113"><label data-title="css property" for="tab-113">css property</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
424
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>I agree to the terms</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-switch</span></span>
|
|
425
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-active-background</span></span>
|
|
426
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-active-border-color</span></span></code></pre></div></div></div><h2 id="states" tabindex="-1">States <a class="header-anchor" href="#states" aria-label="Permalink to “States”"></a></h2><p>The form can have the <code>:focus</code>, <code>:disabled</code>, <code>:readonly</code> and <code>:validation</code> states.</p><h3 id="focus" tabindex="-1">Focus <a class="header-anchor" href="#focus" aria-label="Permalink to “Focus”"></a></h3><p>The form use a default focus style, but you can customize it with :</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-focus-color</span></span>
|
|
427
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-focus-background</span></span>
|
|
428
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-focus-border-color</span></span></code></pre></div><p>You can also customize the outline :</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-outline-size</span></span>
|
|
429
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-outline-style</span></span>
|
|
430
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-outline-color</span></span>
|
|
431
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-outline-offset</span></span></code></pre></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to “Disabled”"></a></h3><p>Apply the <code>disabled</code> attribute on <code><input></code>, <code><textarea></code> or <code><select></code> tags to display the disabled style.</p><!--[--><iframe srcdoc="
|
|
432
|
+
<!DOCTYPE html>
|
|
433
|
+
<html>
|
|
434
|
+
<head>
|
|
435
|
+
<meta charset="utf-8">
|
|
436
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
437
|
+
<style>
|
|
438
|
+
html[data-theme=light] .demo-theme {
|
|
439
|
+
color: black;
|
|
440
|
+
background: white
|
|
441
|
+
}
|
|
442
|
+
html[data-theme=dark] .demo-theme {
|
|
443
|
+
color: white;
|
|
444
|
+
background: black
|
|
445
|
+
}
|
|
446
|
+
body {
|
|
447
|
+
padding:1rem;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
</style>
|
|
451
|
+
</head>
|
|
452
|
+
<body>
|
|
453
|
+
|
|
454
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
455
|
+
</body>
|
|
456
|
+
</html>
|
|
457
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="text" value="My value" disabled><select type="text" disabled><option value="--">--</option></select><textarea disabled>It was a dark and stormy night...</textarea><input type="checkbox" disabled> <input type="checkbox" disabled checked> <input type="radio" disabled> <input type="radio" disabled checked> <input type="checkbox" role="switch" disabled> <input type="checkbox" role="switch" disabled checked><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-139" id="tab-140" checked><label data-title="html" for="tab-140">html</label><input type="radio" name="group-139" id="tab-141"><label data-title="css property" for="tab-141">css property</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
458
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
459
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"--"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>--</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
460
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
461
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>It was a dark and stormy night...</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
462
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"radio"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"checkbox"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switch"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--form-disabled-opacity</span></span></code></pre></div></div></div><h3 id="readonly" tabindex="-1">Readonly <a class="header-anchor" href="#readonly" aria-label="Permalink to “Readonly”"></a></h3><p>Apply the <code>readonly</code> attribute on <code><input></code> or <code><textarea></code> tags to display the readonly style.</p><!--[--><iframe srcdoc="
|
|
463
|
+
<!DOCTYPE html>
|
|
464
|
+
<html>
|
|
465
|
+
<head>
|
|
466
|
+
<meta charset="utf-8">
|
|
467
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
468
|
+
<style>
|
|
469
|
+
html[data-theme=light] .demo-theme {
|
|
470
|
+
color: black;
|
|
471
|
+
background: white
|
|
472
|
+
}
|
|
473
|
+
html[data-theme=dark] .demo-theme {
|
|
474
|
+
color: white;
|
|
475
|
+
background: black
|
|
476
|
+
}
|
|
477
|
+
body {
|
|
478
|
+
padding:1rem;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
</style>
|
|
482
|
+
</head>
|
|
483
|
+
<body>
|
|
484
|
+
|
|
485
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
486
|
+
</body>
|
|
487
|
+
</html>
|
|
488
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><input type="text" value="My value" readonly><textarea readonly>It was a dark and stormy night...</textarea><!--]--></div><!--]--><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My value"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
489
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>It was a dark and stormy night...</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="validation" tabindex="-1">Validation <a class="header-anchor" href="#validation" aria-label="Permalink to “Validation”"></a></h3><p>Use the <code>aria-invalid</code> attribute to display the element as in/valid and use <code>aria-describedby</code> attribute with a <code><small></code> tag to display the information.</p><p>As every design is different, there is not too much default style for in/valid elements. But for accessibility don't forget to add icons to show the errors.</p><!--[--><iframe srcdoc="
|
|
490
|
+
<!DOCTYPE html>
|
|
491
|
+
<html>
|
|
492
|
+
<head>
|
|
493
|
+
<meta charset="utf-8">
|
|
494
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
495
|
+
<style>
|
|
496
|
+
html[data-theme=light] .demo-theme {
|
|
497
|
+
color: black;
|
|
498
|
+
background: white
|
|
499
|
+
}
|
|
500
|
+
html[data-theme=dark] .demo-theme {
|
|
501
|
+
color: white;
|
|
502
|
+
background: black
|
|
503
|
+
}
|
|
504
|
+
body {
|
|
505
|
+
padding:1rem;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
</style>
|
|
509
|
+
</head>
|
|
510
|
+
<body>
|
|
511
|
+
|
|
512
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
513
|
+
</body>
|
|
514
|
+
</html>
|
|
515
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><div><label for="invalidInput">Invalid input</label><input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value"><small id="invalidMsg" style="color:var(--color-error);"><span aria-live="assertive"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"></path></svg> Incorrect value ! </span></small></div><div><label for="validInput">Valid input</label><input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value"><small id="validMsg" style="color:var(--color-success);"><span aria-live="assertive"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"></path></svg> All good ! </span></small></div><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-161" id="tab-162" checked><label data-title="html" for="tab-162">html</label><input type="radio" name="group-161" id="tab-163"><label data-title="scss" for="tab-163">scss</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
516
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"invalidInput"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Invalid input</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
517
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"invalidInput"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-describedby</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"invalidMsg"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-invalid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My bad value"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
518
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"invalidMsg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
519
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-live</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"assertive"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
520
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> xmlns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"16"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"16"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> viewBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"0 0 16 16"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
521
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Incorrect value !</span></span>
|
|
522
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
523
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
524
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
525
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
526
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"validInput"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Valid input</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
527
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"validInput"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-describedby</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"validMsg"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-invalid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"false"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My good value"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
528
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"validMsg"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
529
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-live</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"assertive"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
530
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> xmlns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"16"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"16"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"currentColor"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> viewBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"0 0 16 16"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
531
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> All good !</span></span>
|
|
532
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
533
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
534
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">form</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
535
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> &</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:has</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">aria-invalid</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) {</span></span>
|
|
536
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">aria-live</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
|
|
537
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--color-error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
538
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
539
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
540
|
+
<span class="line"></span>
|
|
541
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> &</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:has</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">aria-invalid</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) {</span></span>
|
|
542
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">aria-live</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
|
|
543
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--color-success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
544
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
545
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
546
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div><h2 id="variants" tabindex="-1">Variants <a class="header-anchor" href="#variants" aria-label="Permalink to “Variants”"></a></h2><h3 id="group" tabindex="-1">Group <a class="header-anchor" href="#group" aria-label="Permalink to “Group”"></a></h3><p>You can group some fields by putting them in a <code><div></code> with the class <code>.group</code>.</p><!--[--><iframe srcdoc="
|
|
547
|
+
<!DOCTYPE html>
|
|
548
|
+
<html>
|
|
549
|
+
<head>
|
|
550
|
+
<meta charset="utf-8">
|
|
551
|
+
<link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
|
|
552
|
+
<style>
|
|
553
|
+
html[data-theme=light] .demo-theme {
|
|
554
|
+
color: black;
|
|
555
|
+
background: white
|
|
556
|
+
}
|
|
557
|
+
html[data-theme=dark] .demo-theme {
|
|
558
|
+
color: white;
|
|
559
|
+
background: black
|
|
560
|
+
}
|
|
561
|
+
body {
|
|
562
|
+
padding:1rem;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
</style>
|
|
566
|
+
</head>
|
|
567
|
+
<body>
|
|
568
|
+
|
|
569
|
+
<script src="/bundles/vanilla-frontend-doc.js"></script>
|
|
570
|
+
</body>
|
|
571
|
+
</html>
|
|
572
|
+
" class="iframe-content" style="" data-v-eaa19fc4></iframe><div hidden data-v-eaa19fc4><!--[--><fieldset><legend>Price</legend><div class="group"><label>Before</label><select><option value="A">CHF</option><option value="B">€</option><option value="C">$</option></select><input type="number" value="110"><label>After</label><button>Send</button></div></fieldset><!--]--></div><!--]--><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-175" id="tab-176" checked><label data-title="html" for="tab-176">html</label><input type="radio" name="group-175" id="tab-177"><label data-title="scss" for="tab-177">scss</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
573
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Price</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
574
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"group"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
575
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Before</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
576
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
577
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"A"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>CHF</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
578
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"B"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>€</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
579
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"C"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>$</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
580
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
581
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"number"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"110"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
582
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>After</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
583
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Send</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
584
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
585
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@natachah/vanilla-frontend/scss/components/group'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div></div></div></div></div></main><footer class="VPDocFooter" data-v-7011f0d8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/components/disclosure.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Disclosure</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/components/loading.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Loading</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0cf61682 data-v-c3855bb3><div class="container" data-v-c3855bb3><p class="message" data-v-c3855bb3>Released under the MIT License.</p><p class="copyright" data-v-c3855bb3>Copyright © 2024-present <a href="https://natachaherth.ch">Natacha Herth</a></p></div></footer><!--[--><!--]--></div></div>
|
|
586
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"base_layout.md\":\"DPVON1Hq\",\"base_media.md\":\"DHSlU0g6\",\"base_reset.md\":\"DD9AA1li\",\"base_typography.md\":\"C9BVN1Re\",\"classes_badge.md\":\"EznZXXqT\",\"classes_breadcrumb.md\":\"DrzF9h9m\",\"classes_card.md\":\"BzNZEHe9\",\"classes_dropdown.md\":\"CKZ2tv7T\",\"classes_grid.md\":\"CKCvlWAg\",\"classes_list.md\":\"CjyB8PFK\",\"components_button.md\":\"CX41PJBd\",\"components_dialog.md\":\"JMjidrIE\",\"components_disclosure.md\":\"BwvLkFL_\",\"components_form.md\":\"C6B5z_6G\",\"components_loading.md\":\"51ktm2_l\",\"components_popover.md\":\"DpbAjVUj\",\"components_progress.md\":\"H7v6t9h-\",\"components_table.md\":\"BPrpvUDy\",\"index.md\":\"DNiLOsZD\",\"javascript_autofill.md\":\"HyVx8c7W\",\"javascript_check.md\":\"BCbZtUBE\",\"javascript_comfort.md\":\"CQm191VA\",\"javascript_consent.md\":\"CbDzabMd\",\"javascript_cookie.md\":\"CFVe2JRe\",\"javascript_drawer.md\":\"D_pT0mrZ\",\"javascript_form.md\":\"sGYh1L4I\",\"javascript_scroll.md\":\"DeOZ4grw\",\"javascript_slider.md\":\"CIa7pHr9\",\"javascript_sortable.md\":\"CThHVTgW\",\"javascript_tabpanel.md\":\"CxAFdAGU\",\"javascript_toggle.md\":\"C66hpUWF\",\"javascript_trap.md\":\"Dt2Rt__e\",\"javascript_tree.md\":\"COR-Pj1y\",\"prologue_conventions.md\":\"wCplqeKt\",\"prologue_release.md\":\"CBJGKY_Y\",\"prologue_upgrade.md\":\"E_0GNNE2\",\"start_customization.md\":\"C4fmzVYD\",\"start_install.md\":\"vqLh01mm\",\"start_mixin.md\":\"B5VMlbiN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vanilla Frontend\",\"description\":\"Documentation of my package\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"}],\"sidebar\":[{\"text\":\"Prologue\",\"items\":[{\"text\":\"Release Notes\",\"link\":\"/prologue/release\"},{\"text\":\"Upgrade guide\",\"link\":\"/prologue/upgrade\"},{\"text\":\"Conventions\",\"link\":\"/prologue/conventions\"}]},{\"text\":\"Quick start\",\"items\":[{\"text\":\"Install\",\"link\":\"/start/install\"},{\"text\":\"Customization\",\"link\":\"/start/customization\"},{\"text\":\"SCSS mixin\",\"link\":\"/start/mixin\"}]},{\"text\":\"Base\",\"items\":[{\"text\":\"Reset\",\"link\":\"/base/reset\"},{\"text\":\"Layout\",\"link\":\"/base/layout\"},{\"text\":\"Typography\",\"link\":\"/base/typography\"},{\"text\":\"Media\",\"link\":\"/base/media\"}]},{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/components/button\"},{\"text\":\"Dialog\",\"link\":\"/components/dialog\"},{\"text\":\"Disclosure\",\"link\":\"/components/disclosure\"},{\"text\":\"Form\",\"link\":\"/components/form\"},{\"text\":\"Loading\",\"link\":\"/components/loading\"},{\"text\":\"Popover\",\"link\":\"/components/popover\"},{\"text\":\"Progress\",\"link\":\"/components/progress\"},{\"text\":\"Table\",\"link\":\"/components/table\"}]},{\"text\":\"Class components\",\"items\":[{\"text\":\"Badge\",\"link\":\"/classes/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/classes/breadcrumb\"},{\"text\":\"Card\",\"link\":\"/classes/card\"},{\"text\":\"Dropdown\",\"link\":\"/classes/dropdown\"},{\"text\":\"Grid\",\"link\":\"/classes/grid\"},{\"text\":\"List\",\"link\":\"/classes/list\"}]},{\"text\":\"Javascript\",\"items\":[{\"text\":\"Autofill\",\"link\":\"/javascript/autofill\"},{\"text\":\"Check all\",\"link\":\"/javascript/check\"},{\"text\":\"Comfort\",\"link\":\"/javascript/comfort\"},{\"text\":\"Consent\",\"link\":\"/javascript/consent\"},{\"text\":\"Cookie\",\"link\":\"/javascript/cookie\"},{\"text\":\"Drawer\",\"link\":\"/javascript/drawer\"},{\"text\":\"Form helper\",\"link\":\"/javascript/form\"},{\"text\":\"Scroll\",\"link\":\"/javascript/scroll\"},{\"text\":\"Slider\",\"link\":\"/javascript/slider\"},{\"text\":\"Sortable\",\"link\":\"/javascript/sortable\"},{\"text\":\"Tabpanel\",\"link\":\"/javascript/tabpanel\"},{\"text\":\"Toggle\",\"link\":\"/javascript/toggle\"},{\"text\":\"Trap\",\"link\":\"/javascript/trap\"},{\"text\":\"Tree\",\"link\":\"/javascript/tree\"}]}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present <a href=\\\"https://natachaherth.ch\\\">Natacha Herth</a>\"},\"socialLinks\":[{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"16\\\" height=\\\"16\\\" fill=\\\"currentColor\\\" class=\\\"bi bi-gitlab\\\" viewBox=\\\"0 0 16 16\\\"><path d=\\\"m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z\\\" /></svg>\"},\"link\":\"https://gitlab.com/packages4913705/vanilla-frontend\",\"ariaLabel\":\"Gitlab\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
|
|
587
|
+
|
|
588
|
+
</body>
|
|
589
|
+
</html>
|