[{"data":1,"prerenderedAt":649},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Felements\u002Fswitch":10,"docs-sidebar":517,"i-lucide:file-text":645,"i-lucide:arrow-left":647},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"id":11,"title":12,"body":13,"description":507,"extension":508,"group":509,"groupOrder":343,"meta":510,"navTitle":511,"navigation":58,"order":512,"path":513,"seo":514,"stem":515,"__hash__":516},"docs\u002Fdocs\u002Felements\u002Fswitch.md","\u003Cwmcp-switch>",{"type":14,"value":15,"toc":502},"minimark",[16,23,55,59,103,114,119,306,310,313,394,406,410,418,498],[17,18,20],"h1",{"id":19},"wmcp-switch",[21,22,12],"code",{},[24,25,26,27,34,35,38,39,42,43,46,47,50,51,54],"p",{},"A boolean control like ",[28,29,31],"a",{"href":30},"\u002Fdocs\u002Felements\u002Fcheckbox",[21,32,33],{},"\u003Cwmcp-checkbox>",", but presented as a switch — ",[21,36,37],{},"role=\"switch\"",", on\u002Foff rather than checked\u002Funchecked. It's form-associated: its state is the boolean ",[21,40,41],{},"checked",", and when on it submits its ",[21,44,45],{},"value"," (default ",[21,48,49],{},"\"on\"",") to the surrounding form. When ",[21,52,53],{},"expose"," is set, an agent can flip it by setting that boolean.",[19,56],{"label":57,"checked":58},"Email notifications",true,[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-switch label=\"Email notifications\" checked>\u003C\u002Fwmcp-switch>\n","html","",[21,67,68],{"__ignoreMap":65},[69,70,73,77,80,84,88,92,95,98,100],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"sqV5G","\u003C",[69,78,19],{"class":79},"sfBZl",[69,81,83],{"class":82},"sI192"," label",[69,85,87],{"class":86},"siQKT","=",[69,89,91],{"class":90},"sxLuP","\"Email notifications\"",[69,93,94],{"class":82}," checked",[69,96,97],{"class":75},">\u003C\u002F",[69,99,19],{"class":79},[69,101,102],{"class":75},">\n",[24,104,105,106,109,110,113],{},"A real toggle and an agent's tool call drive the same state, firing ",[21,107,108],{},"input"," and ",[21,111,112],{},"change"," either way, so the handlers you already wrote run in both cases.",[115,116,118],"h2",{"id":117},"element-attributes","Element attributes",[120,121,122,141],"table",{},[123,124,125],"thead",{},[126,127,128,132,135,138],"tr",{},[129,130,131],"th",{},"Attribute",[129,133,134],{},"Type",[129,136,137],{},"Default",[129,139,140],{},"Description",[142,143,144,164,183,200,216,234,252,274,290],"tbody",{},[126,145,146,151,156,161],{},[147,148,149],"td",{},[21,150,41],{},[147,152,153],{},[21,154,155],{},"boolean",[147,157,158],{},[21,159,160],{},"false",[147,162,163],{},"Whether the switch is on (reflected).",[126,165,166,170,175,180],{},[147,167,168],{},[21,169,45],{},[147,171,172],{},[21,173,174],{},"string",[147,176,177],{},[21,178,179],{},"on",[147,181,182],{},"Value submitted to the form when on.",[126,184,185,190,194,197],{},[147,186,187],{},[21,188,189],{},"label",[147,191,192],{},[21,193,174],{},[147,195,196],{},"—",[147,198,199],{},"Visible label and accessible name.",[126,201,202,207,211,213],{},[147,203,204],{},[21,205,206],{},"name",[147,208,209],{},[21,210,174],{},[147,212,196],{},[147,214,215],{},"Form field name; also seeds the tool name.",[126,217,218,223,227,231],{},[147,219,220],{},[21,221,222],{},"required",[147,224,225],{},[21,226,155],{},[147,228,229],{},[21,230,160],{},[147,232,233],{},"Must be on for the form to be valid.",[126,235,236,241,245,249],{},[147,237,238],{},[21,239,240],{},"disabled",[147,242,243],{},[21,244,155],{},[147,246,247],{},[21,248,160],{},[147,250,251],{},"Disables it for humans and agents alike.",[126,253,254,258,262,266],{},[147,255,256],{},[21,257,53],{},[147,259,260],{},[21,261,155],{},[147,263,264],{},[21,265,160],{},[147,267,268,269,273],{},"Register a ",[28,270,272],{"href":271},"\u002Fdocs\u002Fwebmcp","WebMCP tool"," that sets the switch.",[126,275,276,281,285,287],{},[147,277,278],{},[21,279,280],{},"tool-name",[147,282,283],{},[21,284,174],{},[147,286,196],{},[147,288,289],{},"Override the generated tool name.",[126,291,292,297,301,303],{},[147,293,294],{},[21,295,296],{},"tool-description",[147,298,299],{},[21,300,174],{},[147,302,196],{},[147,304,305],{},"Override the generated tool description.",[115,307,309],{"id":308},"tool-shape","Tool shape",[24,311,312],{},"The exposed tool takes the target state as a boolean:",[60,314,318],{"className":315,"code":316,"language":317,"meta":65,"style":65},"language-json shiki shiki-themes github-light-default ayu-dark","{\n  \"type\": \"object\",\n  \"properties\": { \"checked\": { \"type\": \"boolean\" } },\n  \"required\": [\"checked\"]\n}\n","json",[21,319,320,326,341,372,388],{"__ignoreMap":65},[69,321,322],{"class":71,"line":72},[69,323,325],{"class":324},"sBz_o","{\n",[69,327,329,332,335,338],{"class":71,"line":328},2,[69,330,331],{"class":79},"  \"type\"",[69,333,334],{"class":86},":",[69,336,337],{"class":90}," \"object\"",[69,339,340],{"class":86},",\n",[69,342,344,347,349,352,355,357,359,362,364,367,370],{"class":71,"line":343},3,[69,345,346],{"class":79},"  \"properties\"",[69,348,334],{"class":86},[69,350,351],{"class":324}," { ",[69,353,354],{"class":79},"\"checked\"",[69,356,334],{"class":86},[69,358,351],{"class":324},[69,360,361],{"class":79},"\"type\"",[69,363,334],{"class":86},[69,365,366],{"class":90}," \"boolean\"",[69,368,369],{"class":324}," } }",[69,371,340],{"class":86},[69,373,375,378,380,383,385],{"class":71,"line":374},4,[69,376,377],{"class":79},"  \"required\"",[69,379,334],{"class":86},[69,381,382],{"class":324}," [",[69,384,354],{"class":90},[69,386,387],{"class":324},"]\n",[69,389,391],{"class":71,"line":390},5,[69,392,393],{"class":324},"}\n",[24,395,396,397,399,400,402,403,405],{},"Calling it sets ",[21,398,41],{},", re-validates, and dispatches ",[21,401,108],{}," + ",[21,404,112],{}," — exactly as if a person had toggled it.",[115,407,409],{"id":408},"theming","Theming",[24,411,412,413,417],{},"Every visual is a CSS custom property, defaulting through the ",[28,414,416],{"href":415},"\u002Fdocs\u002Finstallation","design tokens"," to the shadcn base palette:",[60,419,423],{"className":420,"code":421,"language":422,"meta":65,"style":65},"language-css shiki shiki-themes github-light-default ayu-dark",":root {\n  --switch-track-on: var(--brand); \u002F* the \"on\" track color *\u002F\n  --switch-width: 2.5rem;\n  --switch-thumb: 1.15rem;\n}\n","css",[21,424,425,434,462,480,494],{"__ignoreMap":65},[69,426,427,431],{"class":71,"line":72},[69,428,430],{"class":429},"sybcr",":root",[69,432,433],{"class":324}," {\n",[69,435,436,440,442,446,449,452,455,458],{"class":71,"line":328},[69,437,439],{"class":438},"sCHdd","  --switch-track-on",[69,441,334],{"class":86},[69,443,445],{"class":444},"sAJRi"," var",[69,447,448],{"class":324},"(",[69,450,451],{"class":438},"--brand",[69,453,454],{"class":324},")",[69,456,457],{"class":86},";",[69,459,461],{"class":460},"s5O_a"," \u002F* the \"on\" track color *\u002F\n",[69,463,464,467,469,473,477],{"class":71,"line":343},[69,465,466],{"class":438},"  --switch-width",[69,468,334],{"class":86},[69,470,472],{"class":471},"sQY3k"," 2.5",[69,474,476],{"class":475},"s7jPt","rem",[69,478,479],{"class":86},";\n",[69,481,482,485,487,490,492],{"class":71,"line":374},[69,483,484],{"class":438},"  --switch-thumb",[69,486,334],{"class":86},[69,488,489],{"class":471}," 1.15",[69,491,476],{"class":475},[69,493,479],{"class":86},[69,495,496],{"class":71,"line":390},[69,497,393],{"class":324},[499,500,501],"style",{},"html pre.shiki code .sqV5G, html code.shiki .sqV5G{--shiki-default:#1F2328;--shiki-dark:#39BAE680}html pre.shiki code .sfBZl, html code.shiki .sfBZl{--shiki-default:#116329;--shiki-dark:#39BAE6}html pre.shiki code .sI192, html code.shiki .sI192{--shiki-default:#0550AE;--shiki-dark:#FFB454}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}html pre.shiki code .sybcr, html code.shiki .sybcr{--shiki-default:#0550AE;--shiki-dark:#95E6CB}html pre.shiki code .sCHdd, html code.shiki .sCHdd{--shiki-default:#953800;--shiki-dark:#BFBDB6}html pre.shiki code .sAJRi, html code.shiki .sAJRi{--shiki-default:#0550AE;--shiki-dark:#F07178}html pre.shiki code .s5O_a, html code.shiki .s5O_a{--shiki-default:#6E7781;--shiki-default-font-style:inherit;--shiki-dark:#5A6673;--shiki-dark-font-style:italic}html pre.shiki code .sQY3k, html code.shiki .sQY3k{--shiki-default:#0550AE;--shiki-dark:#D2A6FF}html pre.shiki code .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}",{"title":65,"searchDepth":328,"depth":328,"links":503},[504,505,506],{"id":117,"depth":328,"text":118},{"id":308,"depth":328,"text":309},{"id":408,"depth":328,"text":409},"A form-associated on\u002Foff toggle an agent can flip by setting a boolean.","md","Interaction",{},"Switch",7,"\u002Fdocs\u002Felements\u002Fswitch",{"title":12,"description":507},"docs\u002Felements\u002Fswitch","41DIBi8357vDSJNVQK7kOuWc7YeCJ-2YLTs6VsUKY1A",[518,523,527,531,535,540,543,547,551,555,559,563,567,571,575,579,584,585,589,593,597,601,606,609,613,617,620,624,628,632,635,637,640,643],{"path":519,"title":520,"navTitle":521,"group":522,"order":328,"groupOrder":374},"\u002Fdocs\u002Felements\u002Falert","\u003Cwmcp-alert>","Alert","Presentational",{"path":524,"title":525,"navTitle":526,"group":522,"order":343,"groupOrder":374},"\u002Fdocs\u002Felements\u002Favatar","\u003Cwmcp-avatar>","Avatar",{"path":528,"title":529,"navTitle":530,"group":522,"order":72,"groupOrder":374},"\u002Fdocs\u002Felements\u002Fbadge","\u003Cwmcp-badge>","Badge",{"path":532,"title":533,"navTitle":534,"group":509,"order":72,"groupOrder":343},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Button",{"path":536,"title":537,"navTitle":538,"group":522,"order":539,"groupOrder":374},"\u002Fdocs\u002Felements\u002Fcard","\u003Cwmcp-card>","Card",6,{"path":30,"title":33,"navTitle":541,"group":542,"order":374,"groupOrder":328},"Checkbox","Elements",{"path":544,"title":545,"navTitle":546,"group":509,"order":328,"groupOrder":343},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>","Dialog",{"path":548,"title":549,"navTitle":550,"group":542,"order":72,"groupOrder":328},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":552,"title":553,"navTitle":554,"group":509,"order":343,"groupOrder":343},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":556,"title":557,"navTitle":558,"group":509,"order":390,"groupOrder":343},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":560,"title":561,"navTitle":562,"group":522,"order":374,"groupOrder":374},"\u002Fdocs\u002Felements\u002Fprogress","\u003Cwmcp-progress>","Progress",{"path":564,"title":565,"navTitle":566,"group":542,"order":390,"groupOrder":328},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":568,"title":569,"navTitle":570,"group":542,"order":343,"groupOrder":328},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":572,"title":573,"navTitle":574,"group":522,"order":390,"groupOrder":374},"\u002Fdocs\u002Felements\u002Fseparator","\u003Cwmcp-separator>","Separator",{"path":576,"title":577,"navTitle":578,"group":522,"order":512,"groupOrder":374},"\u002Fdocs\u002Felements\u002Fskeleton","\u003Cwmcp-skeleton>","Skeleton",{"path":580,"title":581,"navTitle":582,"group":522,"order":583,"groupOrder":374},"\u002Fdocs\u002Felements\u002Fspinner","\u003Cwmcp-spinner>","Spinner",8,{"path":513,"title":12,"navTitle":511,"group":509,"order":512,"groupOrder":343},{"path":586,"title":587,"navTitle":588,"group":509,"order":374,"groupOrder":343},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":590,"title":591,"navTitle":592,"group":542,"order":328,"groupOrder":328},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":594,"title":595,"navTitle":596,"group":509,"order":539,"groupOrder":343},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",{"path":598,"title":599,"navTitle":600,"group":509,"order":583,"groupOrder":343},"\u002Fdocs\u002Felements\u002Ftooltip","\u003Cwmcp-tooltip>","Tooltip",{"path":602,"title":603,"navTitle":604,"group":605,"order":374,"groupOrder":390},"\u002Fdocs\u002Fexamples\u002Fbrain-dump","Brain-dump → to-do list","Brain-dump → to-dos","Examples",{"path":607,"title":608,"navTitle":608,"group":605,"order":390,"groupOrder":390},"\u002Fdocs\u002Fexamples\u002Fcrm-lead","Email → CRM lead",{"path":610,"title":611,"navTitle":612,"group":605,"order":512,"groupOrder":390},"\u002Fdocs\u002Fexamples\u002Fdashboard","Ask the dashboard a question","Dashboard control",{"path":614,"title":615,"navTitle":616,"group":605,"order":539,"groupOrder":390},"\u002Fdocs\u002Fexamples\u002Fexpense-report","Receipt → expense report","Receipt → expense",{"path":618,"title":605,"navTitle":619,"group":605,"order":72,"groupOrder":390},"\u002Fdocs\u002Fexamples","Overview",{"path":621,"title":622,"navTitle":623,"group":605,"order":328,"groupOrder":390},"\u002Fdocs\u002Fexamples\u002Frecipe-cart","Recipe → grocery cart","Recipe → cart",{"path":625,"title":626,"navTitle":627,"group":605,"order":343,"groupOrder":390},"\u002Fdocs\u002Fexamples\u002Frestaurant-booking","Book a table in one sentence","Restaurant booking",{"path":629,"title":630,"navTitle":630,"group":631,"order":539,"groupOrder":72},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":633,"title":634,"navTitle":634,"group":631,"order":72,"groupOrder":72},"\u002Fdocs","Introduction",{"path":415,"title":636,"navTitle":636,"group":631,"order":328,"groupOrder":72},"Installation",{"path":638,"title":639,"navTitle":639,"group":631,"order":390,"groupOrder":72},"\u002Fdocs\u002Ftesting","Testing",{"path":641,"title":642,"navTitle":642,"group":631,"order":343,"groupOrder":72},"\u002Fdocs\u002Fvalidation","Validation",{"path":271,"title":644,"navTitle":644,"group":631,"order":374,"groupOrder":72},"WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":646},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":648},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1784517902464]