play

html formkit.com collected 2026-09-25 20:37:22 UTC 37,440 bytes, 2 lines download raw bytes

1<!DOCTYPE html><html  lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Play â¡ï¸ FormKit</title><link rel="preconnect" href="https://C4DSL0WX0T-dsn.algolia.net" crossorigin><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><style>/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-d3f6430f],[data-v-d3f6430f]::backdrop,[data-v-d3f6430f]:after,[data-v-d3f6430f]:before{--tw-border-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial}}}.play-page[data-v-d3f6430f]{background:radial-gradient(circle at top,#f6721414,#0000 26%),#f8fafc;height:100vh;overflow:hidden}.play-page[data-color-mode=dark][data-v-d3f6430f]{background:radial-gradient(circle at top,#f6721414,#0000 24%),#050b16}.play-page__header[data-v-d3f6430f]{align-items:center;gap:calc(var(--spacing,.25rem)*4);height:72px;padding-inline:calc(var(--spacing,.25rem)*5);--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);background:#f8fafcd1;border-bottom:1px var(--tw-border-style);border-color:#cbd5e1b3;display:grid;grid-template-areas:"brand toolbar actions";grid-template-columns:auto minmax(0,1fr) auto;position:relative;z-index:30}.play-page[data-color-mode=dark] .play-page__header[data-v-d3f6430f]{background:#030a14d1;border-color:#1e293be6}.play-page__logo[data-v-d3f6430f]{background:linear-gradient(#f6721426,#f672140d);border-radius:var(--radius-2xl,1rem);color:#0f172a;flex-shrink:0;padding:calc(var(--spacing,.25rem)*2)}.play-page[data-color-mode=dark] .play-page__logo[data-v-d3f6430f]{color:#fff}.play-page__header-brand[data-v-d3f6430f]{align-items:center;display:flex;flex-shrink:0;grid-area:brand}.play-page__toolbar-group[data-v-d3f6430f]{align-items:center;display:grid;gap:calc(var(--spacing,.25rem)*3);grid-area:toolbar;grid-template-columns:repeat(3,minmax(0,13rem));position:relative;z-index:2}.play-page__toolbar-group[data-v-d3f6430f],.play-page__toolbar-select[data-v-d3f6430f]{min-width:calc(var(--spacing,.25rem)*0)}.play-page__header-actions[data-v-d3f6430f]{align-items:center;display:flex;gap:calc(var(--spacing,.25rem)*2);grid-area:actions;margin-left:auto;position:relative;z-index:2}.play-page__pro-link[data-v-d3f6430f]{display:none}@media(min-width:940px){.play-page__pro-link[data-v-d3f6430f]{display:inline-flex}}.play-button[data-v-d3f6430f]{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:calc(var(--spacing,.25rem)*2);padding-inline:calc(var(--spacing,.25rem)*3.5);--tw-font-weight:var(--font-weight-medium,500);background:#fff;border-color:#cbd5e1cc;border-width:1px;color:#0f172a;font-weight:var(--font-weight-medium,500);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)))}.play-button[data-v-d3f6430f]:hover{background:#f8fafc}.play-page[data-color-mode=dark] .play-button[data-v-d3f6430f]{background:#ffffff0a;border-color:#94a3b829;color:#dbe6f1}.play-page[data-color-mode=dark] .play-button[data-v-d3f6430f]:hover{background:#ffffff12}.play-button--accent[data-v-d3f6430f]{background-color:#f67214}@media(hover:hover){.play-button--accent[data-v-d3f6430f]:hover{background-color:#ef4207}}.play-button--accent[data-v-d3f6430f]{border-color:#0000;color:#fff}.play-icon-button[data-v-d3f6430f]{align-items:center;background:#fff;border-color:#cbd5e1cc;border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;color:#42556b;display:flex;height:calc(var(--spacing,.25rem)*10);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));width:calc(var(--spacing,.25rem)*10)}

1.play-icon-button svg[data-v-d3f6430f]{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4)}.play-icon-button[data-v-d3f6430f]:hover{background:#f8fafc;color:#0f172a}.play-page[data-color-mode=dark] .play-icon-button[data-v-d3f6430f]{background:#ffffff0a;border-color:#94a3b829;color:#8ea6bf}.play-page[data-color-mode=dark] .play-icon-button[data-v-d3f6430f]:hover{background:#ffffff14;color:#fff}.play-share-menu[data-v-d3f6430f]{position:relative}.play-share-trigger[data-v-d3f6430f]{align-items:center;display:inline-flex;gap:calc(var(--spacing,.25rem)*2)}.play-share-trigger svg[data-v-d3f6430f]{height:calc(var(--spacing,.25rem)*4);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));width:calc(var(--spacing,.25rem)*4)}.play-share-trigger[aria-expanded=true] svg[data-v-d3f6430f]{transform:rotate(180deg)}.play-share-sheet[data-v-d3f6430f]{border-style:var(--tw-border-style);max-width:calc(100vw - 2.5rem);padding:calc(var(--spacing,.25rem)*4);right:calc(var(--spacing,.25rem)*0);top:calc(100% + .75rem);width:23rem;z-index:20;

1--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);background:#fffffffa;border-color:#cbd5e1e6;border-radius:22px;border-width:1px;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:#0f172a;position:absolute}.play-page[data-color-mode=dark] .play-share-sheet[data-v-d3f6430f]{background:linear-gradient(#09111ffa,#08101cfa);border-color:#94a3b829;color:#e2e8f0}.play-share-sheet__section+.play-share-sheet__section[data-v-d3f6430f]{border-top:1px var(--tw-border-style);border-color:#cbd5e1b3;margin-top:calc(var(--spacing,.25rem)*4);padding-top:calc(var(--spacing,.25rem)*4)}.play-page[data-color-mode=dark] .play-share-sheet__section+.play-share-sheet__section[data-v-d3f6430f]{border-color:#94a3b81f}.play-share-sheet__label[data-v-d3f6430f]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.play-share-sheet__copy[data-v-d3f6430f],.play-share-sheet__label[data-v-d3f6430f]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}.play-share-sheet__copy[data-v-d3f6430f]{margin-bottom:calc(var(--spacing,.25rem)*3);margin-top:calc(var(--spacing,.25rem)*1);--tw-leading:calc(var(--spacing,.25rem)*6);color:var(--color-slate-500,oklch(55.4% .046 257.417));line-height:calc(var(--spacing,.25rem)*6)}.play-page[data-color-mode=dark] .play-share-sheet__copy[data-v-d3f6430f]{color:#8ea6bf}.play-share-sheet__row[data-v-d3f6430f]{align-items:stretch;display:flex;gap:calc(var(--spacing,.25rem)*2)}.play-share-sheet__row input[data-v-d3f6430f]{background:#f8fafc;border-color:#cbd5e1e6;border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;color:#52667a;flex:1;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));min-width:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*2.5);padding-inline:calc(var(--spacing,.25rem)*3)}.play-page[data-color-mode=dark] .play-share-sheet__row input[data-v-d3f6430f]{background:#ffffff0a;border-color:#94a3b829;color:#9ab0c7}.play-share-sheet__issue-link[data-v-d3f6430f],.play-share-sheet__row button[data-v-d3f6430f],.play-share-sheet__secondary[data-v-d3f6430f]{border-radius:var(--radius-xl,.75rem);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:calc(var(--spacing,.25rem)*2.5);padding-inline:calc(var(--spacing,.25rem)*3.5);--tw-font-weight:var(--font-weight-medium,500);align-items:center;display:inline-flex;font-weight:var(--font-weight-medium,500);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)))}.play-share-sheet__row button[data-v-d3f6430f]{background-color:#f67214;color:var(--color-white,#fff)}@media(hover:hover){.play-share-sheet__row button[data-v-d3f6430f]:hover{background-color:#ef4207}}.play-share-sheet__row button[data-copied=true][data-v-d3f6430f]{background:#16a34a}.play-share-sheet__row button[data-copied=true][data-v-d3f6430f]:hover{background:#15803d}.play-share-sheet__row button[data-v-d3f6430f]:disabled{cursor:default;opacity:.7}.play-share-sheet__actions[data-v-d3f6430f]{align-items:center;display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.25rem)*2);margin-top:calc(var(--spacing,.25rem)*3)}.play-share-sheet__issue-link[data-v-d3f6430f]{border-radius:var(--radius-xl,.75rem);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:calc(var(--spacing,.25rem)*2.5);padding-inline:calc(var(--spacing,.25rem)*3.5);--tw-font-weight:var(--font-weight-medium,500);align-items:center;background:#fff;border:1px solid #cbd5e1e6;color:#0f172a;display:inline-flex;font-weight:var(--font-weight-medium,500);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)))}.play-page[data-color-mode=dark] .play-share-sheet__issue-link[data-v-d3f6430f]{background:#ffffff0a;border-color:#94a3b829;color:#e2e8f0}.play-share-sheet__issue-link[data-v-d3f6430f]:hover{background:#f8fafc}.play-page[data-color-mode=dark] .play-share-sheet__issue-link[data-v-d3f6430f]:hover{background:#ffffff14}.play-share-sheet__issue-link[data-v-d3f6430f]:disabled{cursor:default;opacity:.7}.play-page__body[data-v-d3f6430f]{display:grid;gap:calc(var(--spacing,.25rem)*4);grid-template-columns:minmax(420px,1fr) minmax(380px,1fr);height:calc(100vh - 72px);padding:calc(var(--spacing,.25rem)*4);position:relative;z-index:0}.play-page__body[data-v-d3f6430f],.play-page__editor[data-v-d3f6430f]{min-height:calc(var(--spacing,.25rem)*0)}.play-page__editor[data-v-d3f6430f]{border-style:var(--tw-border-style);min-width:calc(var(--spacing,.25rem)*0);

1--tw-shadow:0 20px 80px -32px var(--tw-shadow-color,#0f172a59);background:#ffffffe0;border-color:#cbd5e1cc;border-radius:28px;border-width:1px;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);overflow:hidden}.play-page[data-color-mode=dark] .play-page__editor[data-v-d3f6430f]{background:#09111fe6;border-color:#94a3b824}.play-page__preview[data-v-d3f6430f]{border-style:var(--tw-border-style);min-height:calc(var(--spacing,.25rem)*0);min-width:calc(var(--spacing,.25rem)*0);--tw-shadow:0 20px 80px -32px var(--tw-shadow-color,#0f172a59);background:#ffffffeb;border-color:#cbd5e1cc;border-radius:28px;border-width:1px;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:#0f172a;display:flex;flex-direction:column;overflow:hidden}.play-page[data-color-mode=dark] .play-page__preview[data-v-d3f6430f]{background:#09111feb;border-color:#94a3b824;color:#e2e8f0}.play-page__preview-tabs[data-v-d3f6430f]{align-items:center;background:linear-gradient(#ffffffe6,#f8fafcdb);border-bottom:1px var(--tw-border-style);border-color:#cbd5e1cc;display:flex;gap:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*3);padding-inline:calc(var(--spacing,.25rem)*4)}.play-page[data-color-mode=dark] .play-page__preview-tabs[data-v-d3f6430f]{background:linear-gradient(#09111ff5,#09111fe0);border-color:#94a3b824}.play-page__preview-tab-group[data-v-d3f6430f]{align-items:center;background:#94a3b81f;border-radius:var(--radius-2xl,1rem);display:flex;gap:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*1)}.play-page[data-color-mode=dark] .play-page__preview-tab-group[data-v-d3f6430f]{background:#ffffff0a}.play-page__preview-actions[data-v-d3f6430f]{align-items:center;display:flex;gap:calc(var(--spacing,.25rem)*2);margin-left:auto}.play-page__preview-tab[data-v-d3f6430f]{border-radius:var(--radius-xl,.75rem);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:calc(var(--spacing,.25rem)*1.5);padding-inline:calc(var(--spacing,.25rem)*3);--tw-font-weight:var(--font-weight-medium,500);color:#52667a;font-weight:var(--font-weight-medium,500);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)))}.play-page[data-color-mode=dark] .play-page__preview-tab[data-v-d3f6430f]{color:#8ea6bf}.play-page__preview-tab[data-active=true][data-v-d3f6430f]{background:#fff;box-shadow:0 1px 2px #0f172a14;color:#0f172a}.play-page[data-color-mode=dark] .play-page__preview-tab[data-active=true][data-v-d3f6430f]{background:#ffffff14;box-shadow:none;color:#fff}.play-page__preview-surface[data-v-d3f6430f]{flex:1;min-height:calc(var(--spacing,.25rem)*0)}@media(max-width:1100px){.play-page__body[data-v-d3f6430f]{grid-template-columns:1fr;grid-template-rows:minmax(380px,1.08fr) minmax(300px,.92fr)}.play-page__header[data-v-d3f6430f]{grid-template-areas:"brand.actions""toolbar toolbar toolbar";grid-template-columns:auto 1fr auto;height:auto;padding-block:calc(var(--spacing,.25rem)*4)}.play-page__toolbar-group[data-v-d3f6430f]{grid-template-columns:repeat(3,minmax(0,1fr))}.play-page__header-actions[data-v-d3f6430f]{justify-self:flex-end;margin-left:calc(var(--spacing,.25rem)*0)}.play-page__preview-tabs[data-v-d3f6430f]{flex-wrap:nowrap}.play-page__preview-actions[data-v-d3f6430f]{flex-wrap:nowrap;justify-content:flex-end;margin-left:auto;width:auto}}@media(max-width:760px){.play-page[data-v-d3f6430f]{height:auto;min-height:100vh}.play-page__header[data-v-d3f6430f]{grid-template-areas:"brand.actions""toolbar toolbar toolbar";grid-template-columns:auto minmax(0,1fr) auto;padding-block:calc(var(--spacing,.25rem)*3);padding-inline:calc(var(--spacing,.25rem)*4)}.play-page__toolbar-group[data-v-d3f6430f]{grid-template-columns:1fr}.play-page__header-actions[data-v-d3f6430f]{gap:calc(var(--spacing,.25rem)*1.5);justify-self:flex-end}.play-page__body[data-v-d3f6430f]{gap:calc(var(--spacing,.25rem)*3);grid-template-rows:minmax(340px,1fr) minmax(280px,.86fr);padding:calc(var(--spacing,.25rem)*3)}.play-page__editor[data-v-d3f6430f],.play-page__preview[data-v-d3f6430f]{border-radius:24px}.play-page__preview-tabs[data-v-d3f6430f]{flex-wrap:nowrap;gap:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*3);padding-inline:calc(var(--spacing,.25rem)*3)}.play-page__preview-tab-group[data-v-d3f6430f]{flex:none;justify-content:flex-start;width:auto}.play-page__preview-actions[data-v-d3f6430f]{flex:none;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto;width:auto}.play-share-sheet[data-v-d3f6430f]{left:0;right:auto;width:min(22rem,100vw - 2.25rem)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:"*";inherits:false}</style><style>html.dark .sun,html.light .moon{display:none}</style><link rel="stylesheet" href="/_nuxt/entry.BoUUhfzV.css" crossorigin><link rel="preload" as="fetch" crossorigin="anonymous" href="/play/_payload.json?b4cebcca-3635-4cde-a175-683cc382ae04"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/B3ZwDejF.js"><link rel="preload" as="fetch" fetchpriority="low" crossorigin="anonymous" href="/_nuxt/builds/meta/b4cebcca-3635-4cde-a175-683cc382ae04.json">

1<meta property="og:image" content="https://formkit.com/__og-image__/static/play/og.png"><meta property="og:image:type" content="image/png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://formkit.com/__og-image__/static/play/og.png"><meta name="twitter:image:src" content="https://formkit.com/__og-image__/static/play/og.png"><meta property="og:image:width" content="1200"><meta name="twitter:image:width" content="1200"><meta property="og:image:height" content="600"><meta name="twitter:image:height" content="600"><meta name="description" content="Edit FormKit examples in a dedicated playground with deterministic URL snapshots."><meta name="og:site_name" content="FormKit"><meta property="og:title" content="Play â¡ï¸ FormKit"><meta property="og:description" content="Edit FormKit examples in a dedicated playground with deterministic URL snapshots."><meta name="apple-mobile-web-app-title" content="FormKit"><link rel="icon" type="image/x-icon" href="/favicon.ico">

1<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"FormKit","url":"https://formkit.com","logo":"https://formkit.com/logo.png","sameAs":["https://github.com/formkit/formkit","https://twitter.com/formaboratory"]}</script>

1<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"FormKit","url":"https://formkit.com","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://formkit.com/?q={search_term_string}"},"query-input":"required name=search_term_string"}}</script>

1<script type="module" src="/_nuxt/B3ZwDejF.js" crossorigin></script>

1<script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","formkit-color-mode")||"light";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script>

1</head><body><div id="__nuxt"><div><main class="play-page" data-color-mode="light" data-v-d3f6430f><header class="play-page__header" data-v-d3f6430f><div class="play-page__header-brand" data-v-d3f6430f><a href="/" class="play-page__logo" data-v-d3f6430f><svg class="the-logo-mark h-7 w-7" viewbox="0 0 26 26" version="1.1" data-v-d3f6430f><defs><linearGradient id="gradient-v-0" x1="19.657226%" y1="0%" x2="84.4401775%" y2="100%"><stop stop-color="#FF9357" offset="0%"></stop><stop stop-color="#F7CE68" offset="100%"></stop></linearGradient></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-49.000000, -47.000000)"><g transform="translate(49.000000, 47.000000)"><path d="M24,21.01824 L24,25.01824 L12,25.01824 L12,21.01824 L24,21.01824 Z M4,17.01824 L4,21.01824 L0,21.01824 L0,17.01824 L4,17.01824 Z M8,13.01824 L8,17.01824 L4,17.01824 L4,13.01824 L8,13.01824 Z M12,9.01824 L12,13.01824 L8,13.01824 L8,9.01824 L12,9.01824 Z M8,5.01824 L8,9.01824 L4,9.01824 L4,5.01824 L8,5.01824 Z M4,1.01824 L4,5.01824 L0,5.01824 L0,1.01824 L4,1.01824 Z" fill="url(#gradient-v-0)"></path></g></g></g></svg></a></div><div class="play-page__toolbar-group" data-v-d3f6430f><div class="play-page__toolbar-select" data-v-d3f6430f><div class="group max-w-[20em] min-w-0 grow mb-4 data-[disabled]:select-none data-[disabled]:opacity-50 text-base formkit-outer !mb-0" data-type="dropdown" data-family="dropdown" data-draggable="true" data-id="play-framework" data-v-d3f6430f><div class="mb-1.5 formkit-wrapper"><!----><div class="relative flex items-center bg-white border border-gray-400 rounded-sm group-data-[is-multiline]:!rounded-sm focus-within:ring-1 focus-within:!ring-blue-500 focus-within:!border-blue-500 group-data-[invalid]:border-red-500 group-data-[invalid]:ring-1 group-data-[invalid]:ring-red-500 group-data-[disabled]:bg-gray-100 group-data-[disabled]:!cursor-not-allowed shadow-xs group-[&amp;]/repeater:shadow-none group-[&amp;]/multistep:shadow-none dark:bg-transparent dark:border-gray-500 dark:group-data-[disabled]:bg-gray-700/40 dark:group-data-[invalid]:border-red-500 dark:group-data-[invalid]:ring-red-500 formkit-inner !border-gray-300 !shadow-none !rounded-xl dark:!border-gray-700 dark:!bg-gray-900/60 !w-full !min-w-0" id="play-framework_inner"><!----><!----><button class="flex grow justify-between w-full py-2 pl-3 pr-0 text-base text-gray-700 text-left group-data-[disabled]:!cursor-not-allowed group-data-[prefix-icon]:!pl-0 group-data-[suffix-icon]:!pr-0 data-[placeholder]:text-gray-400 selection:bg-blue-100 dark:data-[placeholder]:text-gray-400/50 dark:text-gray-300 formkit-selector" id="play-framework" type="button" tabindex="0" name="play-framework" aria-haspopup="listbox" aria-expanded="false"><div class="grow flex items-center text-gray-700 formkit-selectionWrapper"><!--[--><span class="grow text-gray-700 group-data-[multiple]:p-2 dark:text-gray-300 [&amp;&gt;*]:ml-0 formkit-selection inline-flex items-center gap-2" data-v-d3f6430f><img src="/img/logos/react.svg" alt="React" class="h-4 w-4 shrink-0" aria-hidden="true" data-v-d3f6430f> React</span><!--]--></div><!----><!----><span class="text-base inline-flex justify-center w-[2.5em] relative my-auto [&amp;&gt;svg]:w-[1em] [&amp;&gt;svg]:mx-auto shrink-0 formkit-selectIcon formkit-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7"><path d="M8,6.5c-.13,0-.26-.05-.35-.15L3.15,1.85c-.2-.2-.2-.51,0-.71,.2-.2,.51-.2,.71,0l4.15,4.15L12.15,1.15c.2-.2,.51-.2,.71,0,.2,.2,.2,.51,0,.71l-4.5,4.5c-.1,.1-.23,.15-.35,.15Z" fill="currentColor"/></svg></span></button><div class="rounded-sm shadow-md mt-1 overflow-clip empty:hidden border border-gray-300 dark:border-gray-600 group-data-[expanded]:opacity-100 group-data-[overscroll]:m-0 group-data-[overscroll]:shadow-none group-data-[overscroll]:border-none formkit-dropdownWrapper !shadow-none" id="play-framework_popover" data-is-wrapper="true" style="position:absolute;top:100%;overflow:auto;min-width:100%;"><!----></div><!----><!----></div></div><!----><!----></div></div><div class="play-page__toolbar-select" data-v-d3f6430f><!----></div><div class="play-page__toolbar-select" data-v-d3f6430f><div class="group max-w-[20em] min-w-0 grow mb-4 data-[disabled]:select-none data-[disabled]:opacity-50 text-base formkit-outer !mb-0" data-type="dropdown" data-family="dropdown" data-draggable="true" data-id="play-css-framework" data-v-d3f6430f><div class="mb-1.5 formkit-wrapper"><!----><div class="relative flex items-center bg-white border border-gray-400 rounded-sm group-data-[is-multiline]:!rounded-sm focus-within:ring-1 focus-within:!ring-blue-500 focus-within:!border-blue-500 group-data-[invalid]:border-red-500 group-data-[invalid]:ring-1 group-data-[invalid]:ring-red-500 group-data-[disabled]:bg-gray-100 group-data-[disabled]:!cursor-not-allowed shadow-xs group-[&amp;]/repeater:shadow-none group-[&amp;]/multistep:shadow-none dark:bg-transparent dark:border-gray-500 dark:group-data-[disabled]:bg-gray-700/40 dark:group-data-[invalid]:border-red-500 dark:group-data-[invalid]:ring-red-500 formkit-inner !border-gray-300 !shadow-none !rounded-xl dark:!border-gray-700 dark:!bg-gray-900/60 !w-full !min-w-0" id="play-css-framework_inner"><!----><!----><button class="flex grow justify-between w-full py-2 pl-3 pr-0 text-base text-gray-700 text-left group-data-[disabled]:!cursor-not-allowed group-data-[prefix-icon]:!pl-0 group-data-[suffix-icon]:!pr-0 data-[placeholder]:text-gray-400 selection:bg-blue-100 dar

1k:data-[placeholder]:text-gray-400/50 dark:text-gray-300 formkit-selector" id="play-css-framework" type="button" tabindex="0" name="play-css-framework" aria-haspopup="listbox" aria-expanded="false"><div class="grow flex items-center text-gray-700 formkit-selectionWrapper"><div class="grow text-gray-700 group-data-[multiple]:p-2 dark:text-gray-300 [&amp;&gt;*]:ml-0 formkit-selection"><div class="ml-[1.5em] formkit-option !ml-0">Tailwind CSS</div></div></div><!----><!----><span class="text-base inline-flex justify-center w-[2.5em] relative my-auto [&amp;&gt;svg]:w-[1em] [&amp;&gt;svg]:mx-auto shrink-0 formkit-selectIcon formkit-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7"><path d="M8,6.5c-.13,0-.26-.05-.35-.15L3.15,1.85c-.2-.2-.2-.51,0-.71,.2-.2,.51-.2,.71,0l4.15,4.15L12.15,1.15c.2-.2,.51-.2,.71,0,.2,.2,.2,.51,0,.71l-4.5,4.5c-.1,.1-.23,.15-.35,.15Z" fill="currentColor"/></svg></span></button><div class="rounded-sm shadow-md mt-1 overflow-clip empty:hidden border border-gray-300 dark:border-gray-600 group-data-[expanded]:opacity-100 group-data-[overscroll]:m-0 group-data-[overscroll]:shadow-none group-data-[overscroll]:border-none formkit-dropdownWrapper !shadow-none" id="play-css-framework_popover" data-is-wrapper="true" style="position:absolute;top:100%;overflow:auto;min-width:100%;"><!----></div><!----><!----></div></div><!----><!----></div></div></div><div class="play-page__header-actions" data-v-d3f6430f><a href="/pro" class="btn btn-hollow play-page__pro-link" data-v-d3f6430f> Go Pro </a><a href="https://github.com/formkit/formkit" rel="noopener noreferrer" target="_blank" class="px-2 py-1 text-center flex items-center text-gray-600 hover:bg-gray-200 rounded my-auto dark:hover:bg-gray-700 dark:text-gray-300 play-page__github" data-v-d3f6430f><div role="status" class="flex justify-end"><svg aria-hidden="true" class="block w-[1em] h-[1em] mr-1 sm:w-4 sm:h-4 text-current animate-spin fill-black dark:fill-white opacity-50" viewB

1ox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 496 512" class="w-4 ml-1 text-current"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><button class="p-1 w-7 aspect-square flex items-center justify-center hover:bg-gray-200 rounded my-auto dark:hover:bg-gray-700 dark:text-gray-300 play-page__color-toggle" data-v-d3f6430f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="sun w-full"><path fill="currentColor" d="M248 80c0 13.25-10.7 24-24 24s-24-10.75-24-24 10.7-24 24-24 24 10.75 24 24zM128 256c0-53.9 42.1-96 96-96 53 0 96 42.1 96 96 0 53-43 96-96 96-53.9 0-96-43-96-96zm96 64c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-24 112c0-13.3 10.7-24 24-24s24 10.7 24 24-10.7 24-24 24-24-10.7-24-24zm200-152c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zM48 232c13.25 0 24 10.7 24 24s-10.75 24-24 24-24-10.7-24-24 10.75-24 24-24zm72-104c0 13.3-10.7 24-24 24-13.25 0-24-10.7-24-24s10.75-24 24-24c13.3 0 24 10.7 24 24zm232 280c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm24-280c0 13.3-10.7 24-24 24s-24-10.7-24-24 10.7-24 24-24 24 10.7 24 24zM96 360c13.3 0 24 10.7 24 24s-10.7 24-24 24c-13.25 0-24-10.7-24-24s10.75-24 24-24z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 384 512" class="moon w-3"><path fill="currentColor" d="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg></button></div></header><div class="play-page__body" data-v-d3f6430f><div class="play-page__editor" data-v-d3f6430f><!----></div><div class="play-page__preview" data-v-d3f6430f><div class="play-page__preview-tabs" data-v-d3f6430f><div class="play-page__preview-tab-group" data-v-d3f6430f><button class="play-page__preview-tab" data-active="true" data-v-d3f6430f> Render </button><button class="play-page__preview-tab" data-active="false" data-v-d3f6430f> HTML </button></div><div class="play-page__preview-actions" data-v-d3f6430f><button class="play-icon-button" type="button" aria-label="Reload preview" data-v-d3f6430f><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-d3f6430f><path d="M15.833 10a5.833 5.833 0 1 1-1.709-4.124M15.833 4.167v3.75h-3.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" data-v-d3f6430f></path></svg></button><div class="play-share-menu" data-v-d3f6430f><button class="play-button play-button--accent play-share-trigger" type="button" aria-expanded="false" data-v-d3f6430f><span data-v-d3f6430f>Share</span><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-d3f6430f><path d="m6.667 8.333 3.333 3.334 3.333-3.334" stroke="currentColor" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round" data-v-d3f6430f></path></svg></button><div class="play-share-sheet" style="display:none;" data-v-d3f6430f><div class="play-share-sheet__section" data-v-d3f6430f><div class="play-share-sheet__label" data-v-d3f6430f>Sharable URL</div><p class="play-share-sheet__copy" data-v-d3f6430f> Generates a short link that recreates this playground state. </p><div class="play-share-sheet__row" data-v-d3f6430f><input value="Short URL unavailable." readonly data-v-d3f6430f><button type="button" data-copied="false" disabled data-v-d3f6430f>Copy</button></div><div class="play-share-sheet__actions" data-v-d3f6430f><button class="play-share-sheet__issue-link" type="button" disabled data-v-d3f6430f>Create GitHub Issue</button></div></div></div></div></div></div><div class="play-page__preview-surface" data-v-d3f6430f><span data-v-d3f6430f></span></div></div></div></main></div></div><div id="teleports"></div>

1<script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__" data-src="/play/_payload.json?b4cebcca-3635-4cde-a175-683cc382ae04">[{"state":1,"once":15,"_errors":16,"serverRendered":5,"path":18,"prerenderedAt":19},["Reactive",2],{"$scolor-mode":3,"$ssite-framework-hydrated":6,"$ssite-config":7},{"preference":4,"value":4,"unknown":5,"forced":6},"light",true,false,{"_priority":8,"env":12,"name":13,"url":14},{"name":9,"env":10,"url":11},-10,-15,-3,"production","nuxt-app","https://formkit.com",["Set"],["ShallowReactive",17],{},"/play",1784921646684]</script>

1<script>window.__NUXT__={};window.__NUXT__.config={public:{formkitVersion:"2.1.0",formkitProKey:"fk-587ccb544307",apiUrl:"https://formkit-docs-api.formkit.workers.dev",standardAgentsApiUrl:"https://formkit-docs-api.formkit.workers.dev",mdc:{components:{prose:true,map:{}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{wsUrl:""}},app:{baseURL:"/",buildId:"b4cebcca-3635-4cde-a175-683cc382ae04",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>

1<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e03eb2766ef14a2eb612b8e609a0570f","r":1,"spa":2}' crossorigin="anonymous"></script>

1
2</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.