1import{p as gs,c,a as h,f as A,t as o}from"./BI2tZWd8.js";import{p as hi,ap as ys,f as r,a as ei,b as O,h as Fi,c as u,X as os,r as F,s as n,n as l,t as Cs,d as Gs,e as Vs}from"./DxBliZnO.js";import{h as d}from"./DiC8NrNs.js";import{c as k}from"./nDQo01hx.js";import{B as zs,P as T}from"./DFbndQJN.js";import"./CspEIRAF.js";import{p as Y,i as Q,r as vi,s as qs}from"./B-ZvfN7d.js";import{C as mi}from"./BWy7GTS-.js";import{a as Hs,b as js,C as fi,M as bi}from"./D3L1kKwl.js";import{L as $i}from"./lk6HjD2Y.js";import{s as Ds}from"./HHkKqIvA.js";import{D as Us,C as ps}from"./DyMYDqMk.js";import{u as cs}from"./2ToSwzkX.js";import{s as ni}from"./BrcIZBIX.js";import{a as us}from"./CdHIZOj-.js";import{c as Fs,n as Ws,b as U,m as vs}from"./L3HtKIEC.js";import{s as rs}from"./DDYswBcw.js";import{o as Ns}from"./RZrbKNui.js";import"./RpHoshYe.js";import"./CoK4xnl_.js";import"./DV-aouco.js";import"./BCcz3TRE.js";import"./DAEoy3IA.js";import"./_t897QwF.js";import{A as Os}from"./Cknws4gs.js";import"./D1EcV80E.js";import{H as j}from"./k4gwLLN1.js";import{P as v}from"./CQmeZtzZ.js";import{L as si,U as ds}from"./C6oAPt5y.js";import{A as ai}from"./BAO8dlNT.js";import{H as J}from"./B4koQBrl.js";import{H as Es}from"./BzgzTMCu.js";var Ys=A("<div><!></div>");function Ks(q,E){const L=gs();hi(E,!0);let G=Y(E,"ref",15,null),x=Y(E,"id",19,()=>Fs(L)),B=Y(E,"value",31,()=>ys([])),M=Y(E,"onValueChange",3,Ws),V=vi(E,["$$slots","$$events","$$legacy","ref","id","value","onValueChange","name","required","disabled","children","child","readonly"]);const w=Hs.create({id:U(()=>x()),ref:U(()=>G(),g=>G(g)),disabled:U(()=>!!E.disabled),required:U(()=>!!E.required),readonly:U(()=>!!E.readonly),name:U(()=>E.name),value:U(()=>rs(B()),g=>{Ns(B(),g)||(B(rs(g)),M()(g))}),onValueChange:U(()=>M())}),m=Fi(()=>vs(V,w.props));var $=c(),R=r($);{var C=g=>{var f=c(),z=r(f);ni(z,()=>E.child,()=>({props:O(m)})),h(g,f)},y=g=>{var f=Ys();us(f,()=>({...O(m)}));var z=u(f);ni(z,()=>E.children??os),F(f),h(g,f)};Q(R,g=>{E.child?g(C):g(y,!1)})}h(q,$),ei()}var Xs=A("<span><!></span>");function Js(q,E){const L=gs();hi(E,!0);let G=Y(E,"ref",15,null),x=Y(E,"id",19,()=>Fs(L)),B=vi(E,["$$slots","$$events","$$legacy","ref","id","child","children"]);const M=js.create({id:U(()=>x()),ref:U(()=>
1G(),C=>G(C))}),V=Fi(()=>vs(B,M.props));var w=c(),m=r(w);{var $=C=>{var y=c(),g=r(y);ni(g,()=>E.child,()=>({props:O(V)})),h(C,y)},R=C=>{var y=Xs();us(y,()=>({...O(V)}));var g=u(y);ni(g,()=>E.children??os),F(y),h(C,y)};Q(m,C=>{E.child?C($):C(R,!1)})}h(q,w),ei()}var Qs=A('<div class="text-background inline-flex items-center justify-center"><!></div>'),Zs=A('<div class="flex items-center space-x-3"><!> <!></div>');function ia(q){var E=Zs(),L=u(E);fi(L,{id:"terms","aria-labelledby":"terms-label",class:"border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]",name:"hello",indeterminate:!0,children:(B,M)=>{let V=()=>M?.().checked,w=()=>M?.().indeterminate;var m=Qs(),$=u(m);{var R=y=>{bi(y,{class:"size-[15px]",weight:"bold"})},C=y=>{var g=c(),f=r(g);{var z=I=>{mi(I,{class:"size-[15px]",weight:"bold"})};Q(f,I=>{V()&&I(z)},!0)}h(y,g)};Q($,y=>{w()?y(R):y(C,!1)})}F(m),h(B,m)},$$slots:{default:!0}});var G=n(L,2);$i(G,{id:"terms-label",for:"terms",class:"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",children:(x,B)=>{l();var M=o("Accept terms and conditions");h(x,M)},$$slots:{default:!0}}),F(E),h(q,E)}var sa=A('<div class="text-background inline-flex items-center justify-center"><!></div>'),aa=A('<div class="flex items-center space-x-3"><!> <!></div>');function As(q,E){hi(E,!0);let L=Y(E,"id",19,cs),G=Y(E,"checked",15,!1),x=Y(E,"ref",15,null),B=vi(E,["$$slots","$$events","$$legacy","id","checked","ref","labelText"]);Us(q,{size:"xs",wrapperClass:"rounded-bl-card rounded-br-card",children:(M,V)=>{var w=aa(),m=u(w);{const R=(C,y)=>{let g=()=>y?.().checked,f=()=>y?.().indeterminate;var z=sa(),I=u(z);{var W=H=>{bi(H,{class:"size-[15px]",weight:"bold"})},K=H=>{var N=c(),ii=r(N);{var ki=Z=>{mi(Z,{class:"size-[15px]",weight:"bold"})};Q(ii,Z=>{g()&&Z(ki)},!0)}h(H,N)};Q(I,H=>{f()?H(W):H(K,!1)})}F(z),h(C,z)};k(m,()=>fi,(C,y)=>{y(C,qs({get id(){return L()},"aria-labelledby":"terms-label",class:"border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 data-disabled:cursor-not-allowed data-disabled:opacity-70 data-disabled:pointer-events-none peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]",name:"hello"},()=>B,{get ref(){return x()},set ref(g){x(g)},get checked(){return G()},set checked(g){G(g)},children:R,$$slots:{default:!0}}))})}var $=n(m,2);k($,()=>$i,(R,C)=>{C(R,{id:"terms-label",get for(){return L()},class:"text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",children:(y,g)=>{l();var f=o();Cs(()=>Ds(f,E.labelText)),h(y,f)},$$slots:{default:!0}})}),F(w),h(M,w)},$$slots:{default:!0}}),ei()}const ti=(q,E)=>{let L=()=>E?.().value,G=()=>E?.().label;const x=Fi(cs);var B=na(),M=u(B);{const w=(m,$)=>{let R=()=>$?.().checked,C=()=>$?.().indeterminate;var y=ta(),g=u(y);{var f=I=>{bi(I,{class:"size-[15px]",weight:"bold"})},z=I=>{var W=c(),K=r(W);{var H=N=>{mi(N,{class:"size-[15px]",weight:"bold"})};Q(K,N=>{R()&&N(H)},!0)}h(I,W)};Q(g,I=>{C()?I(f):I(z,!1)})}F(y),h(m,y)};k(M,()=>fi,(m,$)=>{$(m,{get id(){return O(x)},get"aria-labelledby"(){return`${O(x)??""}-label`},class:"border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]",name:"hello",get value(){return L()},children:w,$$slots:{default:!0}})})}var V=n(M,2);k(V,()=>$i,(w,m)=>{m(w,{get id(){return`${O(x)??""}-label`},get for(){return O(x)},class:"pl-3 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",children:($,R)=>{l();var C=o();Cs(()=>Ds(C,G())),h($,C)},$$slots:{default:!0}})}),F(B),h(q,B)};var ta=A('<div class="text-background inline-flex items-center justify-center"><!></div>'),na=A('<div class="flex items-center"><!> <!></div>'),ha=A('<!> <div class="flex flex-col gap-4"><!> <!> <!> <!></div>',1);
1function ea(q,E){hi(E,!0);let L=Gs(ys(["marketing","news"]));var G=c(),x=r(G);k(x,()=>Ks,(B,M)=>{M(B,{class:"flex flex-col gap-3",name:"notifications",onValueChange:console.log,get value(){return O(L)},set value(V){Vs(L,V,!0)},children:(V,w)=>{var m=ha(),$=r(m);k($,()=>Js,(z,I)=>{I(z,{class:"text-foreground-alt text-sm font-medium",children:(W,K)=>{l();var H=o("Notifications");h(W,H)},$$slots:{default:!0}})});var R=n($,2),C=u(R);ti(C,()=>({label:"Marketing",value:"marketing"}));var y=n(C,2);ti(y,()=>({label:"Promotions",value:"promotions"}));var g=n(y,2);ti(g,()=>({label:"News",value:"news"}));var f=n(g,2);ti(f,()=>({label:"Updates",value:"updates"})),F(R),h(V,m)},$$slots:{default:!0}})}),h(q,G),ei()}const ms={title:"Checkbox",description:"Enables users to select or deselect options with support for indeterminate states."},{title:At,description:gt}=ms;var ka=A('<figure class="code" data-rehype-pretty-code-figure=""><!></figure>'),la=A("<strong>Tri-State Support</strong>: Handles checked, unchecked, and indeterminate states, providing versatility in form design.",1),pa=A("<strong>Accessibility</strong>: Built with WAI-ARIA guidelines in mind, ensuring keyboard navigation and screen reader support.",1),ra=A("<strong>Flexible State Management</strong>: Supports both controlled and uncontrolled state, allowing for full control over the checkbox's checked state.",1),da=A("<!> <!> <!>",1),Ea=A("<strong>Root</strong>: The main component that manages the state and behavior of the checkbox.",1),Aa=A("It's recommended to use the <!> primitive to create your own custom checkbox component that can be used throughout your application. In the example below, we're using the <!> and <!> components to create a custom checkbox component.",1),ga=A("You can then use the <!> component in your application like so:",1),ya=A("This section covers how to manage the <!> state of the Checkbox.",1),oa=A("Use <!> for simple, automatic state synchronization:",1),Ca=A("Use a <!> for complete control over the state's reads and writes.",1),Da=A("This section covers how to manage the <!> state of the Checkbox.",1),ca=A("Use <!> for simple, automatic state synchronization:",1),ua=A("Use a <!> for complete control over the state's reads and writes.",1),Fa=A("You can disable the checkbox by setting the <!> prop to <!>.",1),va=A("If you set the <!> prop, a hidden checkbox input will be rendered to submit the value of the checkbox with a form.",1),ma=A("By default, the checkbox will be submitted with default checkbox value of <!> if the <!> prop is <!>.",1),fa=A("If you'd prefer to submit a different value, you can use the <!> prop to set the value of the hidden input.",1),ba=A("If you want to make the checkbox required, you can use the <!> prop.",1),$a=A("This will apply the <!> attribute to the hidden input element, ensuring that proper form submission is enforced.",1),_a=A("You can use the <!> component to create a checkbox group.",1),xa=A('<figure class="code" data-rehype-pretty-code-figure=""><!></figure>'),Ba=A("This section covers how to manage the <!> state of a Checkbox Group.",1),Ma=A("Use <!> for simple, automatic state synchronization:",1),Sa=A("Use a <!> for complete control over the state's reads and writes.",1),Pa=A("To render hidden <!> elements for the various checkboxes within a group, pass a <!> to <!>. All descendent checkboxes will then render hidden inputs with the same name.",1),wa=A("When a <!>
1 component is used, its descendent <!> components will use certain properties from the group, such as the <!>, <!>, and <!>.",1),Ra=A('<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning">MyCheckbox.svelte</figcaption><!></figure> <!> <figure data-rehype-pretty-code-figure="" data-metadata=""><figcaption data-rehype-pretty-code-title="" data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning">+page.svelte</figcaption><!></figure> <!> <!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <!> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!> <figure data-rehype-pretty-code-figure=""><!></figure> <!> <!>',1);function yt(q,E){zs(q,{get metadata(){return ms},children:(L,G)=>{var x=Ra(),B=r(x);ps(B,{name:"checkbox-demo",componentName:"Checkbox",variant:"preview",preview:s=>{ia(s)},children:(s,t)=>{var p=ka(),i=u(p);k(i,()=>T,(e,D)=>{D(e,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(b,_)=>{var S=c(),P=r(S);d(P,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 2<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 3<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Check</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"phosphor-svelte/lib/Check"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 4<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Minus</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"phosphor-svelte/lib/Minus"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 5<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 6<span data-line=""> </span> 7<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"flex items-center space-x-3"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 8<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
8Root</span></span> 9<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"terms"</span></span> 10<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> aria-labelledby</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"terms-label"</span></span> 11<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]"</span></span> 12<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"hello"</span></span> 13<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> indeterminate</span></span> 14<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ></span></span> 15<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> children</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 16<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"text-background inline-flex items-center justify-center"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 17<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 18<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Minus</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"size-[15px]"</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> weight</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bold"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 19<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {:</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">else if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 20<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Check</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"size-[15px]"</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> weight</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bold"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 21<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 22<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 23<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 24<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
24Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 25<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span></span> 26<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"terms-label"</span></span> 27<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> for</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"terms"</span></span> 28<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"</span></span> 29<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ></span></span> 30<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Accept terms and conditions</span></span> 31<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 32<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(b,S)},$$slots:{default:!0}})}),F(p),h(s,p)},$$slots:{preview:!0,default:!0}});var M=n(B,2);k(M,()=>j,(a,s)=>{s(a,{id:"overview",children:(t,p)=>{l();var i=o("Overview");h(t,i)},$$slots:{default:!0}})});var V=n(M,2);k(V,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=o("The Checkbox component provides a flexible and accessible way to create checkbox inputs in your Svelte applications. It supports three states: checked, unchecked, and indeterminate, allowing for complex form interactions and data representations.");h(t,i)},$$slots:{default:!0}})});var w=n(V,2);k(w,()=>j,(a,s)=>{s(a,{id:"key-features",children:(t,p)=>{l();var i=o("Key Features");h(t,i)},$$slots:{default:!0}})});var m=n(w,2);k(m,()=>ds,(a,s)=>{s(a,{children:(t,p)=>{var i=da(),e=r(i);k(e,()=>si,(_,S)=>{S(_,{children:(P,ui)=>{var X=la();l(),h(P,X)},$$slots:{default:!0}})});var D=n(e,2);k(D,()=>si,(_,S)=>{S(_,{children:(P,ui)=>{var X=pa();l(),h(P,X)},$$slots:{default:!0}})});var b=n(D,2);k(b,()=>si,(_,S)=>{S(_,{children:(P,ui)=>{var X=ra();l(),h(P,X)},$$slots:{default:!0}})}),h(t,i)},$$slots:{default:!0}})});var $=n(m,2);k($,()=>j,(a,s)=>{s(a,{id:"architecture",children:(t,p)=>{l();var i=o("Architecture");h(t,i)},$$slots:{default:!0}})});var R=n($,2);k(R,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=o("The Checkbox component is composed of the following parts:");h(t,i)},$$slots:{default:!0}})});var C=n(R,2);k(C,()=>ds,(a,s)=>{s(a,{children:(t,p)=>{var i=c(),e=r(i);k(e,()=>si,(D,b)=>{b(D,{children:(_,S)=>{var P=Ea();l(),h(_,P)},$$slots:{default:!0}})}),h(t,i)},$$slots:{default:!0}})});var y=n(C,2);k(y,()=>j,(a,s)=>{s(a,{id:"structure",children:(t,p)=>{l();var i=o("Structure");h(t,i)},$$slots:{default:!0}})});var g=n(y,2);k(g,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=o("Here's an overview of how the Checkbox component is structured in code:");h(t,i)},$$slots:{default:!0}})});var f=n(g,2),z=u(f);k(z,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 33<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 34<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 35<span data-line=""> </span> 36<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
36Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 37<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> children</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 38<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 39<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> -</span></span> 40<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {:</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">else if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 41<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> â </span></span> 42<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {:</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">else</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 43<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> â</span></span> 44<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 45<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 46<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(f);var I=n(f,2);k(I,()=>j,(a,s)=>{s(a,{id:"reusable-components",children:(t,p)=>{l();var i=o("Reusable Components");h(t,i)},$$slots:{default:!0}})});var W=n(I,2);k(W,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Aa(),e=n(r(i));d(e,()=>"<code>Checkbox</code>");var D=n(e,2);d(D,()=>"<code>Checkbox</code>");var b=n(D,2);k(b,()=>ai,(_,S)=>{S(_,{href:"/docs/components/label",children:(P,ui)=>{var X=c(),Ls=r(X);d(Ls,()=>"<code>Label</code>"),h(P,X)},$$slots:{default:!0}})}),l(),h(t,i)},$$slots:{default:!0}})});var K=n(W,2),H=n(u(K));k(H,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 47<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span></span> 48<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">
48,</span></span> 49<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 50<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> useId</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 51<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> type </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">WithoutChildrenOrChild</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 52<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 53<span data-line=""> </span> 54<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> let</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 55<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> id </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> useId</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 56<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">bindable</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">false</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 57<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> ref </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">bindable</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">null</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 58<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> labelRef </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">bindable</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">null</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 59<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> labelText</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span></span> 60<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> ...</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">restProps</span></span> 61<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> WithoutChildrenOrChild</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">RootProps</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> &</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 62<span data-line=""><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> labelText</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> string</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 63<span data-line=""><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> labelRef</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">?:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> HTMLLabelElement</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> |</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> null</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 64<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> =</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">props</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 65<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 66<span data-line=""> </span> 67<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
67Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> {</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">id</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">}</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">checked</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">ref</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> {</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">...</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">restProps</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 68<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> children</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 69<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 70<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> -</span></span> 71<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {:</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">else if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 72<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> â </span></span> 73<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {:</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">else</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 74<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> â</span></span> 75<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 76<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 77<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 78<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> for</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">ref</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">labelRef</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 79<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">labelText</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 80<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
80Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(K);var N=n(K,2);k(N,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=ga(),e=n(r(i));d(e,()=>"<code>MyCheckbox</code>"),l(),h(t,i)},$$slots:{default:!0}})});var ii=n(N,2),ki=n(u(ii));k(ki,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning","data-metadata":"",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 81<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">MyCheckbox</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"$lib/components/MyCheckbox.svelte"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 82<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 83<span data-line=""> </span> 84<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyCheckbox</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> labelText</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"Enable notifications"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(ii);var Z=n(ii,2);As(Z,{labelText:"Enable notifications"});var _i=n(Z,2);k(_i,()=>j,(a,s)=>{s(a,{id:"managing-checked-state",children:(t,p)=>{l();var i=o("Managing Checked State");h(t,i)},$$slots:{default:!0}})});var xi=n(_i,2);k(xi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=ya(),e=n(r(i));d(e,()=>"<code>checked</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Bi=n(xi,2);k(Bi,()=>J,(a,s)=>{s(a,{id:"two-way-binding",children:(t,p)=>{l();var i=o("Two-Way Binding");h(t,i)},$$slots:{default:!0}})});var Mi=n(Bi,2);k(Mi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=oa(),e=n(r(i));d(e,()=>"<code>bind:checked</code>"),l(),h(t,i)},$$slots:{default:!0}})});var li=n(Mi,2),fs=u(li);k(fs,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 85<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 86<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">
86 let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myChecked </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">false</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 87<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 88<span data-line=""> </span> 89<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> onclick</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={()</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> =></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> (myChecked </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> false</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> uncheck </span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 90<span data-line=""> </span> 91<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">myChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(li);var Si=n(li,2);k(Si,()=>J,(a,s)=>{s(a,{id:"fully-controlled",children:(t,p)=>{l();var i=o("Fully Controlled");h(t,i)},$$slots:{default:!0}})});var Pi=n(Si,2);k(Pi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Ca(),e=n(r(i));k(e,()=>ai,(D,b)=>{b(D,{href:"https://svelte.dev/docs/svelte/bind#Function-bindings",children:(_,S)=>{l();var P=o("Function Binding");h(_,P)},$$slots:{default:!0}})}),l(),h(t,i)},$$slots:{default:!0}})});var pi=n(Pi,2),bs=u(pi);k(bs,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 92<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 93<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">
93 let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myChecked </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">false</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 94<span data-line=""> </span> 95<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> function</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> getChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 96<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> return</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 97<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span></span> 98<span data-line=""> </span> 99<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> function</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> setChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">newChecked</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> boolean</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 100<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myChecked </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> newChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 101<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span></span> 102<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 103<span data-line=""> </span> 104<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">getChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> setChecked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 105<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> <!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span> 106<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(pi);var wi=n(pi,2);k(wi,()=>j,(a,s)=>{s(a,{id:"managing-indeterminate-state",children:(t,p)=>
106{l();var i=o("Managing Indeterminate State");h(t,i)},$$slots:{default:!0}})});var Ri=n(wi,2);k(Ri,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Da(),e=n(r(i));d(e,()=>"<code>indeterminate</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ii=n(Ri,2);k(Ii,()=>J,(a,s)=>{s(a,{id:"two-way-binding-1",children:(t,p)=>{l();var i=o("Two-Way Binding");h(t,i)},$$slots:{default:!0}})});var Ti=n(Ii,2);k(Ti,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=ca(),e=n(r(i));d(e,()=>"<code>bind:indeterminate</code>"),l(),h(t,i)},$$slots:{default:!0}})});var ri=n(Ti,2),$s=u(ri);k($s,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 107<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">MyCheckbox</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"$lib/components/MyCheckbox.svelte"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 108<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myIndeterminate </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">true</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 109<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 110<span data-line=""> </span> 111<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> onclick</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={()</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> =></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> (myIndeterminate </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> false</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 112<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> clear indeterminate</span></span> 113<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 114<span data-line=""> </span> 115<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyCheckbox</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">indeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">myIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(ri);var Li=n(ri,2);k(Li,()=>J,(a,s)=>{s(a,{id:"fully-controlled-1",children:(t,p)=>
115{l();var i=o("Fully Controlled");h(t,i)},$$slots:{default:!0}})});var Gi=n(Li,2);k(Gi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=ua(),e=n(r(i));k(e,()=>ai,(D,b)=>{b(D,{href:"https://svelte.dev/docs/svelte/bind#Function-bindings",children:(_,S)=>{l();var P=o("Function Binding");h(_,P)},$$slots:{default:!0}})}),l(),h(t,i)},$$slots:{default:!0}})});var di=n(Gi,2),_s=u(di);k(_s,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 116<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 117<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myIndeterminate </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">true</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 118<span data-line=""> </span> 119<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> function</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> getIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 120<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> return</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 121<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span></span> 122<span data-line=""> </span> 123<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> function</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> setIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">newIndeterminate</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> boolean</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 124<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myIndeterminate </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> newIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 125<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span></span> 126<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 127<span data-line=""> </span> 128<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
128Root</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">indeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">getIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> setIndeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 129<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> <!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span> 130<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(di);var Vi=n(di,2);k(Vi,()=>j,(a,s)=>{s(a,{id:"disabled-state",children:(t,p)=>{l();var i=o("Disabled State");h(t,i)},$$slots:{default:!0}})});var zi=n(Vi,2);k(zi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Fa(),e=n(r(i));d(e,()=>"<code>disabled</code>");var D=n(e,2);d(D,()=>"<code>true</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ei=n(zi,2),xs=u(Ei);k(xs,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>'<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyCheckbox</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> </span><mark data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">disabled</span></mark><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> labelText</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"Enable notifications"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span></code>'),h(t,i)},$$slots:{default:!0}})}),F(Ei);var qi=n(Ei,2);As(qi,{disabled:!0,labelText:"Enable notifications"});var Hi=n(qi,2);k(Hi,()=>j,(a,s)=>{s(a,{id:"html-forms",children:(t,p)=>{l();var i=o("HTML Forms");h(t,i)},$$slots:{default:!0}})});var ji=n(Hi,2);k(ji,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=va(),e=n(r(i));d(e,()=>"<code>name</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ui=n(ji,2);k(Ui,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=ma(),e=n(r(i));d(e,()=>"<code>'on'</code>");var D=n(e,2);d(D,()=>"<code>checked</code>");var b=n(D,2);d(b,()=>"<code>true</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ai=n(Ui,2),Bs=u(Ai);k(Bs,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>'<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyCheckbox</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> </span><mark data-highlighted-chars-mark="" data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"notifications"</span></mark><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> labelText</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"Enable notifications"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span></code>'),h(t,i)},$$slots:{default:!0}})}),F(Ai);var Wi=n(Ai,2);k(Wi,()=>J,(a,s)=>{s(a,{id:"custom-input-value",children:(t,p)=>
130{l();var i=o("Custom Input Value");h(t,i)},$$slots:{default:!0}})});var Ni=n(Wi,2);k(Ni,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=fa(),e=n(r(i));d(e,()=>"<code>value</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Oi=n(Ni,2);k(Oi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=o("For example, if you wanted to submit a string value, you could do the following:");h(t,i)},$$slots:{default:!0}})});var gi=n(Oi,2),Ms=u(gi);k(Ms,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">MyCheckbox</span></span> 131<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> </span><mark data-highlighted-chars-mark="" data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"hello"</span></mark></span> 132<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"notifications"</span></span> 133<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> labelText</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"Enable notifications"</span></span> 134<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">/></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(gi);var Yi=n(gi,2);k(Yi,()=>J,(a,s)=>{s(a,{id:"required",children:(t,p)=>{l();var i=o("Required");h(t,i)},$$slots:{default:!0}})});var Ki=n(Yi,2);k(Ki,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=ba(),e=n(r(i));d(e,()=>"<code>required</code>"),l(),h(t,i)},$$slots:{default:!0}})});var yi=n(Ki,2),Ss=u(yi);k(Ss,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> </span><mark data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">required</span></mark><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 135<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> <!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span> 136<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(yi);var Xi=n(yi,2);k(Xi,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=$a(),e=n(r(i));d(e,()=>"<code>required</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ji=n(Xi,2);k(Ji,()=>j,(a,s)=>{s(a,{id:"checkbox-groups",children:(t,p)=>{l();var i=o("Checkbox Groups");h(t,i)},$$slots:{default:!0}})});var Qi=n(Ji,2);k(Qi,()=>v,(a,s)=>{s(a,{children:(t,p)=>
136{l();var i=_a(),e=n(r(i));d(e,()=>"<code>Checkbox.Group</code>"),l(),h(t,i)},$$slots:{default:!0}})});var oi=n(Qi,2),Ps=u(oi);k(Ps,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 137<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 138<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 139<span data-line=""> </span> 140<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"notifications"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 141<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">GroupLabel</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Notifications</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">GroupLabel</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 142<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"marketing"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 143<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"promotions"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 144<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
144Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"news"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 145<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(oi);var Zi=n(oi,2);ps(Zi,{name:"checkbox-demo-group",componentName:"Checkbox",containerClass:"mt-6",preview:s=>{ea(s,{})},children:(s,t)=>{var p=xa(),i=u(p);k(i,()=>T,(e,D)=>{D(e,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(b,_)=>{var S=c(),P=r(S);d(P,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 146<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> useId</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 147<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Check</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"phosphor-svelte/lib/Check"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 148<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Minus</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"phosphor-svelte/lib/Minus"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 149<span data-line=""> </span> 150<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myValue </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">string</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">[]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">([</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"marketing"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "news"</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">])</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 151<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 152<span data-line=""> </span> 153<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span></span> 154<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"flex flex-col gap-3"</span></span> 155<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">myValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 156<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"notifications"</span></span> 157<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> onValueChange</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">console</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">.</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">log</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 158<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 159<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">GroupLabel</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"text-foreground-alt text-sm font-medium"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 160<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Notifications</span></span> 161<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">GroupLabel</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 162<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">
162"flex flex-col gap-4"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 163<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">render</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> MyCheckbox</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "Marketing"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "marketing"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 164<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">render</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> MyCheckbox</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "Promotions"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "promotions"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 165<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">render</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> MyCheckbox</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "News"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "news"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 166<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">render</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> MyCheckbox</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "Updates"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "updates"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 167<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 168<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 169<span data-line=""> </span> 170<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> MyCheckbox</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">
170,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> label </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">: </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> string; label: string </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 171<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {@</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">const</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> id </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> useId</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 172<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"flex items-center"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 173<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span></span> 174<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> {</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">id</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">}</span></span> 175<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> aria-labelledby</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">-label"</span></span> 176<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]"</span></span> 177<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"hello"</span></span> 178<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> {</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">value</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">}</span></span> 179<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ></span></span> 180<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> children</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">(</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">
180,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 181<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"text-background inline-flex items-center justify-center"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 182<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {#</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> indeterminate</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 183<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Minus</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"size-[15px]"</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> weight</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bold"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 184<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {:</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">else if</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> checked</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 185<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Check</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"size-[15px]"</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> weight</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bold"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 186<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">if</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 187<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 188<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 189<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 190<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
190Root</span></span> 191<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">-label"</span></span> 192<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> for</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">id</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 193<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> class</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"pl-3 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"</span></span> 194<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ></span></span> 195<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span> 196<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Label</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 197<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> </</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">div</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 198<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{/</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">snippet</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span></span></code>`),h(b,S)},$$slots:{default:!0}})}),F(p),h(s,p)},$$slots:{preview:!0,default:!0}});var is=n(Zi,2);k(is,()=>J,(a,s)=>{s(a,{id:"managing-value-state",children:(t,p)=>{l();var i=o("Managing Value State");h(t,i)},$$slots:{default:!0}})});var ss=n(is,2);k(ss,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Ba(),e=n(r(i));d(e,()=>"<code>value</code>"),l(),h(t,i)},$$slots:{default:!0}})});var as=n(ss,2);k(as,()=>Es,(a,s)=>{s(a,{id:"two-way-binding-2",children:(t,p)=>{l();var i=o("Two-Way Binding");h(t,i)},$$slots:{default:!0}})});var ts=n(as,2);k(ts,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Ma(),e=n(r(i));d(e,()=>"<code>bind:value</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ci=n(ts,2),ws=u(Ci);k(ws,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 199<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 200<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">
200 let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myValue </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">string</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">[]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">([])</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 201<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 202<span data-line=""> </span> 203<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span></span> 204<span data-line=""><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> onclick</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={()</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> =></span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 205<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myValue </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> [</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-1"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">,</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C"> "item-2"</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 206<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }}</span></span> 207<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 208<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Open Items 1 and 2</span></span> 209<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">button</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 210<span data-line=""> </span> 211<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"myItems"</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">myValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 212<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">GroupLabel</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">Items</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">GroupLabel</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 213<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">
213Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-1"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 214<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-2"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 215<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> <</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Root</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"item-3"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> /></span></span> 216<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(Ci);var ns=n(Ci,2);k(ns,()=>Es,(a,s)=>{s(a,{id:"fully-controlled-2",children:(t,p)=>{l();var i=o("Fully Controlled");h(t,i)},$$slots:{default:!0}})});var hs=n(ns,2);k(hs,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Sa(),e=n(r(i));k(e,()=>ai,(D,b)=>{b(D,{href:"https://svelte.dev/docs/svelte/bind#Function-bindings",children:(_,S)=>{l();var P=o("Function Binding");h(_,P)},$$slots:{default:!0}})}),l(),h(t,i)},$$slots:{default:!0}})});var Di=n(hs,2),Rs=u(Di);k(Rs,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> lang</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"ts"</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 217<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> import </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">{</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> from </span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"bits-ui"</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 218<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> let</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myValue </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> $</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E">state</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">string</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">[]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">></span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">([])</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 219<span data-line=""> </span> 220<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> function</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> getValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">()</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 221<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> return</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 222<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span></span> 223<span data-line=""> </span> 224<span data-line=""><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> function</span><span style="--shiki-dark:#EEEEEE;--shiki-light:#4E4E4E"> setValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">(</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">newValue</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C"> string</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">[]</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">)</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> {</span></span> 225<span data-line=""><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> myValue </span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383">=</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> newValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">;</span></span> 226<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> }</span></span> 227<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">script</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 228<span data-line=""> </span> 229<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#5BA2D0;--shiki-light:#838383"> bind</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">:</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">value</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">={</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040">getValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">
229,</span><span style="--shiki-dark:#DEE0EF;--shiki-light:#404040"> setValue</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">}</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 230<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> <!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span> 231<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(Di);var es=n(Di,2);k(es,()=>J,(a,s)=>{s(a,{id:"html-forms-1",children:(t,p)=>{l();var i=o("HTML Forms");h(t,i)},$$slots:{default:!0}})});var ks=n(es,2);k(ks,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=Pa(),e=n(r(i));d(e,()=>"<code><input /></code>");var D=n(e,2);d(D,()=>"<code>name</code>");var b=n(D,2);d(b,()=>"<code>Checkbox.Group</code>"),l(),h(t,i)},$$slots:{default:!0}})});var ci=n(ks,2),Is=u(ci);k(Is,()=>T,(a,s)=>{s(a,{class:"Serendipity Midnight Serendipity Morning",tabindex:"0","data-language":"svelte","data-theme":"Serendipity Midnight Serendipity Morning",children:(t,p)=>{var i=c(),e=r(i);d(e,()=>`<code data-language="svelte" data-theme="Serendipity Midnight Serendipity Morning" style="display: grid;"><span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"><</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585"> </span><mark data-highlighted-chars-mark="" data-highlighted-chars="" class="chars--highlighted"><span style="--shiki-dark:#B0E2FD;--shiki-light:#858585">name</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">=</span><span style="--shiki-dark:#E3D891;--shiki-light:#4C4C4C">"notifications"</span></mark><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span> 232<span data-line=""><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A"> <!--</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"> ... </span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">--></span></span> 233<span data-line=""><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A"></</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Checkbox</span><span style="--shiki-dark:#8D8F9E;--shiki-light:#9A9A9A">.</span><span style="--shiki-dark:#E6E6E6;--shiki-light:#4C4C4C">Group</span><span style="--shiki-dark:#707070;--shiki-light:#9A9A9A">></span></span></code>`),h(t,i)},$$slots:{default:!0}})}),F(ci);var ls=n(ci,2);k(ls,()=>v,(a,s)=>{s(a,{children:(t,p)=>{l();var i=wa(),e=n(r(i));d(e,()=>"<code>Checkbox.Group</code>");var D=n(e,2);d(D,()=>"<code>Checkbox.Root</code>");var b=n(D,2);d(b,()=>"<code>name</code>");var _=n(b,2);d(_,()=>"<code>required</code>");var S=n(_,2);d(S,()=>"<code>disabled</code>"),l(),h(t,i)},$$slots:{default:!0}})});var Ts=n(ls,2);Os(Ts,{get schemas(){return E.schemas}}),h(L,x)},$$slots:{default:!0}})}export{yt as default,ms as metadata};
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.