[{"data":1,"prerenderedAt":750},["ShallowReactive",2],{"content-\u002Fdocs\u002Fbinding-inputs\u002Fselect":3},{"id":4,"title":5,"body":6,"description":730,"extension":731,"meta":732,"metaRows":733,"navigation":317,"path":745,"seo":746,"source":747,"stem":748,"__hash__":749},"docs\u002Fdocs\u002Fbinding-inputs\u002Fselect.md","Select & multi-select",{"type":7,"value":8,"toc":722},"minimark",[9,13,29,32,43,48,53,59,133,147,151,157,222,329,336,344,361,422,439,443,446,678,688,692,718],[10,11,5],"h1",{"id":12},"select-multi-select",[14,15,16],"blockquote",{},[17,18,19,20,24,25,28],"p",{},"One element, two leaf shapes: a scalar for ",[21,22,23],"code",{},"\u003Cselect>",", an array for ",[21,26,27],{},"\u003Cselect multiple>",". Pick the mode in the schema; the directive follows.",[30,31],"docs-meta-table",{},[17,33,34,35,38,39,42],{},"Pick a country from the single select to watch the JSON readout switch its scalar value. In the multi-select below, hold ⌘ (or Ctrl) and click multiple options. Every picked option's ",[21,36,37],{},"value="," attribute lands in the ",[21,40,41],{},"tags"," array in selection order. The directive reads the schema leaf at each path and infers single vs. multi automatically.",[44,45],"docs-demo",{"label":46,"slug":47},"Select Demo","select",[49,50,52],"h2",{"id":51},"single-select-scalar","Single select → scalar",[17,54,55,56,58],{},"When the schema leaf is a scalar (enum, string, number), ",[21,57,23],{}," binds to that one value:",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-vue shiki shiki-themes github-light github-dark","\u003Cselect v-register=\"form.register('country')\">\n  \u003Coption value=\"us\">United States\u003C\u002Foption>\n  \u003Coption value=\"uk\">United Kingdom\u003C\u002Foption>\n\u003C\u002Fselect>\n","vue","",[21,67,68,111,117,123],{"__ignoreMap":65},[69,70,73,77,80,84,87,91,94,97,100,103,106,108],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"sVt8B","\u003C",[69,78,47],{"class":79},"s9eBZ",[69,81,83],{"class":82},"sScJk"," v-register",[69,85,86],{"class":75},"=",[69,88,90],{"class":89},"sZZnC","\"",[69,92,93],{"class":75},"form.",[69,95,96],{"class":82},"register",[69,98,99],{"class":75},"(",[69,101,102],{"class":89},"'country'",[69,104,105],{"class":75},")",[69,107,90],{"class":89},[69,109,110],{"class":75},">\n",[69,112,114],{"class":71,"line":113},2,[69,115,116],{"class":75},"  \u003Coption value=\"us\">United States\u003C\u002Foption>\n",[69,118,120],{"class":71,"line":119},3,[69,121,122],{"class":75},"  \u003Coption value=\"uk\">United Kingdom\u003C\u002Foption>\n",[69,124,126,129,131],{"class":71,"line":125},4,[69,127,128],{"class":75},"\u003C\u002F",[69,130,47],{"class":79},[69,132,110],{"class":75},[17,134,135,136,138,139,142,143,146],{},"The picked option's ",[21,137,37],{}," attribute lands in ",[21,140,141],{},"form.values.country",". The schema's leaf type drives the storage type: ",[21,144,145],{},"z.enum(['us', 'uk'])"," keeps the value as the matching literal.",[49,148,150],{"id":149},"multi-select-array","Multi-select → array",[17,152,153,154,156],{},"When the schema leaf is an array, ",[21,155,27],{}," writes every picked option's value into that array, in selection order:",[60,158,160],{"className":62,"code":159,"language":64,"meta":65,"style":65},"\u003Cselect v-register=\"form.register('tags')\" multiple>\n  \u003Coption value=\"design\">Design\u003C\u002Foption>\n  \u003Coption value=\"eng\">Engineering\u003C\u002Foption>\n  \u003Coption value=\"ops\">Ops\u003C\u002Foption>\n  \u003Coption value=\"sales\">Sales\u003C\u002Foption>\n\u003C\u002Fselect>\n",[21,161,162,192,197,202,207,213],{"__ignoreMap":65},[69,163,164,166,168,170,172,174,176,178,180,183,185,187,190],{"class":71,"line":72},[69,165,76],{"class":75},[69,167,47],{"class":79},[69,169,83],{"class":82},[69,171,86],{"class":75},[69,173,90],{"class":89},[69,175,93],{"class":75},[69,177,96],{"class":82},[69,179,99],{"class":75},[69,181,182],{"class":89},"'tags'",[69,184,105],{"class":75},[69,186,90],{"class":89},[69,188,189],{"class":82}," multiple",[69,191,110],{"class":75},[69,193,194],{"class":71,"line":113},[69,195,196],{"class":75},"  \u003Coption value=\"design\">Design\u003C\u002Foption>\n",[69,198,199],{"class":71,"line":119},[69,200,201],{"class":75},"  \u003Coption value=\"eng\">Engineering\u003C\u002Foption>\n",[69,203,204],{"class":71,"line":125},[69,205,206],{"class":75},"  \u003Coption value=\"ops\">Ops\u003C\u002Foption>\n",[69,208,210],{"class":71,"line":209},5,[69,211,212],{"class":75},"  \u003Coption value=\"sales\">Sales\u003C\u002Foption>\n",[69,214,216,218,220],{"class":71,"line":215},6,[69,217,128],{"class":75},[69,219,47],{"class":79},[69,221,110],{"class":75},[60,223,227],{"className":224,"code":225,"language":226,"meta":65,"style":65},"language-ts shiki shiki-themes github-light github-dark","const form = useForm({\n  schema: z.object({\n    tags: z.array(z.enum(['design', 'eng', 'ops', 'sales'])),\n  }),\n  defaultValues: { tags: [] },\n})\n\nform.values.tags \u002F\u002F ['design', 'ops']\n","ts",[21,228,229,248,258,297,302,307,312,319],{"__ignoreMap":65},[69,230,231,235,239,242,245],{"class":71,"line":72},[69,232,234],{"class":233},"szBVR","const",[69,236,238],{"class":237},"sj4cs"," form",[69,240,241],{"class":233}," =",[69,243,244],{"class":82}," useForm",[69,246,247],{"class":75},"({\n",[69,249,250,253,256],{"class":71,"line":113},[69,251,252],{"class":75},"  schema: z.",[69,254,255],{"class":82},"object",[69,257,247],{"class":75},[69,259,260,263,266,269,272,275,278,281,284,286,289,291,294],{"class":71,"line":119},[69,261,262],{"class":75},"    tags: z.",[69,264,265],{"class":82},"array",[69,267,268],{"class":75},"(z.",[69,270,271],{"class":82},"enum",[69,273,274],{"class":75},"([",[69,276,277],{"class":89},"'design'",[69,279,280],{"class":75},", ",[69,282,283],{"class":89},"'eng'",[69,285,280],{"class":75},[69,287,288],{"class":89},"'ops'",[69,290,280],{"class":75},[69,292,293],{"class":89},"'sales'",[69,295,296],{"class":75},"])),\n",[69,298,299],{"class":71,"line":125},[69,300,301],{"class":75},"  }),\n",[69,303,304],{"class":71,"line":209},[69,305,306],{"class":75},"  defaultValues: { tags: [] },\n",[69,308,309],{"class":71,"line":215},[69,310,311],{"class":75},"})\n",[69,313,315],{"class":71,"line":314},7,[69,316,318],{"emptyLinePlaceholder":317},true,"\n",[69,320,322,325],{"class":71,"line":321},8,[69,323,324],{"class":75},"form.values.tags ",[69,326,328],{"class":327},"sJ8bj","\u002F\u002F ['design', 'ops']\n",[17,330,331,332,335],{},"Deselecting an option removes it from the array; the array shape always reflects the current visual selection. No event-listener wiring on your side; the directive infers multi-mode from the ",[21,333,334],{},"multiple"," attribute and the schema's array leaf.",[49,337,339,340,343],{"id":338},"the-number-modifier","The ",[21,341,342],{},".number"," modifier",[17,345,346,349,350,353,354,357,358,360],{},[21,347,348],{},"\u003Coption value=\"...\">"," only stores strings. When the schema's array (or scalar) leaf is ",[21,351,352],{},"z.number()"," or ",[21,355,356],{},"z.array(z.number())",", the ",[21,359,342],{}," modifier coerces every picked option's value to a number before the write:",[60,362,364],{"className":62,"code":363,"language":64,"meta":65,"style":65},"\u003Cselect v-register.number=\"form.register('priority')\">\n  \u003Coption value=\"1\">Low\u003C\u002Foption>\n  \u003Coption value=\"2\">Medium\u003C\u002Foption>\n  \u003Coption value=\"3\">High\u003C\u002Foption>\n\u003C\u002Fselect>\n",[21,365,366,399,404,409,414],{"__ignoreMap":65},[69,367,368,370,372,374,377,380,382,384,386,388,390,393,395,397],{"class":71,"line":72},[69,369,76],{"class":75},[69,371,47],{"class":79},[69,373,83],{"class":82},[69,375,376],{"class":75},".",[69,378,379],{"class":82},"number",[69,381,86],{"class":75},[69,383,90],{"class":89},[69,385,93],{"class":75},[69,387,96],{"class":82},[69,389,99],{"class":75},[69,391,392],{"class":89},"'priority'",[69,394,105],{"class":75},[69,396,90],{"class":89},[69,398,110],{"class":75},[69,400,401],{"class":71,"line":113},[69,402,403],{"class":75},"  \u003Coption value=\"1\">Low\u003C\u002Foption>\n",[69,405,406],{"class":71,"line":119},[69,407,408],{"class":75},"  \u003Coption value=\"2\">Medium\u003C\u002Foption>\n",[69,410,411],{"class":71,"line":125},[69,412,413],{"class":75},"  \u003Coption value=\"3\">High\u003C\u002Foption>\n",[69,415,416,418,420],{"class":71,"line":209},[69,417,128],{"class":75},[69,419,47],{"class":79},[69,421,110],{"class":75},[17,423,424,425,428,429,432,433,438],{},"The directive parses ",[21,426,427],{},"'1'"," → ",[21,430,431],{},"1"," per option. The ",[434,435,437],"a",{"href":436},"\u002Fdocs\u002Fbinding-inputs\u002Fcoercion","Schema-driven coercion"," page documents the full leaf-type mapping.",[49,440,442],{"id":441},"custom-display-values","Custom display values",[17,444,445],{},"The dropdown's option labels are pure HTML; bind them however you'd render any other list:",[60,447,449],{"className":62,"code":448,"language":64,"meta":65,"style":65},"\u003Cscript setup lang=\"ts\">\n  const countries = [\n    { code: 'us', flag: '🇺🇸', name: 'United States' },\n    { code: 'uk', flag: '🇬🇧', name: 'United Kingdom' },\n    { code: 'ca', flag: '🇨🇦', name: 'Canada' },\n    { code: 'au', flag: '🇦🇺', name: 'Australia' },\n  ]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cselect v-register=\"form.register('country')\">\n    \u003Coption v-for=\"opt in countries\" :key=\"opt.code\" :value=\"opt.code\">\n      {{ opt.flag }} {{ opt.name }}\n    \u003C\u002Foption>\n  \u003C\u002Fselect>\n\u003C\u002Ftemplate>\n",[21,450,451,471,484,507,526,545,564,569,577,582,592,609,643,649,659,669],{"__ignoreMap":65},[69,452,453,455,458,461,464,466,469],{"class":71,"line":72},[69,454,76],{"class":75},[69,456,457],{"class":79},"script",[69,459,460],{"class":82}," setup",[69,462,463],{"class":82}," lang",[69,465,86],{"class":75},[69,467,468],{"class":89},"\"ts\"",[69,470,110],{"class":75},[69,472,473,476,479,481],{"class":71,"line":113},[69,474,475],{"class":233},"  const",[69,477,478],{"class":237}," countries",[69,480,241],{"class":233},[69,482,483],{"class":75}," [\n",[69,485,486,489,492,495,498,501,504],{"class":71,"line":119},[69,487,488],{"class":75},"    { code: ",[69,490,491],{"class":89},"'us'",[69,493,494],{"class":75},", flag: ",[69,496,497],{"class":89},"'🇺🇸'",[69,499,500],{"class":75},", name: ",[69,502,503],{"class":89},"'United States'",[69,505,506],{"class":75}," },\n",[69,508,509,511,514,516,519,521,524],{"class":71,"line":125},[69,510,488],{"class":75},[69,512,513],{"class":89},"'uk'",[69,515,494],{"class":75},[69,517,518],{"class":89},"'🇬🇧'",[69,520,500],{"class":75},[69,522,523],{"class":89},"'United Kingdom'",[69,525,506],{"class":75},[69,527,528,530,533,535,538,540,543],{"class":71,"line":209},[69,529,488],{"class":75},[69,531,532],{"class":89},"'ca'",[69,534,494],{"class":75},[69,536,537],{"class":89},"'🇨🇦'",[69,539,500],{"class":75},[69,541,542],{"class":89},"'Canada'",[69,544,506],{"class":75},[69,546,547,549,552,554,557,559,562],{"class":71,"line":215},[69,548,488],{"class":75},[69,550,551],{"class":89},"'au'",[69,553,494],{"class":75},[69,555,556],{"class":89},"'🇦🇺'",[69,558,500],{"class":75},[69,560,561],{"class":89},"'Australia'",[69,563,506],{"class":75},[69,565,566],{"class":71,"line":314},[69,567,568],{"class":75},"  ]\n",[69,570,571,573,575],{"class":71,"line":321},[69,572,128],{"class":75},[69,574,457],{"class":79},[69,576,110],{"class":75},[69,578,580],{"class":71,"line":579},9,[69,581,318],{"emptyLinePlaceholder":317},[69,583,585,587,590],{"class":71,"line":584},10,[69,586,76],{"class":75},[69,588,589],{"class":79},"template",[69,591,110],{"class":75},[69,593,595,598,600,602,604,607],{"class":71,"line":594},11,[69,596,597],{"class":75},"  \u003C",[69,599,47],{"class":79},[69,601,83],{"class":82},[69,603,86],{"class":75},[69,605,606],{"class":89},"\"form.register('country')\"",[69,608,110],{"class":75},[69,610,612,615,618,621,623,626,629,631,634,637,639,641],{"class":71,"line":611},12,[69,613,614],{"class":75},"    \u003C",[69,616,617],{"class":79},"option",[69,619,620],{"class":82}," v-for",[69,622,86],{"class":75},[69,624,625],{"class":89},"\"opt in countries\"",[69,627,628],{"class":82}," :key",[69,630,86],{"class":75},[69,632,633],{"class":89},"\"opt.code\"",[69,635,636],{"class":82}," :value",[69,638,86],{"class":75},[69,640,633],{"class":89},[69,642,110],{"class":75},[69,644,646],{"class":71,"line":645},13,[69,647,648],{"class":75},"      {{ opt.flag }} {{ opt.name }}\n",[69,650,652,655,657],{"class":71,"line":651},14,[69,653,654],{"class":75},"    \u003C\u002F",[69,656,617],{"class":79},[69,658,110],{"class":75},[69,660,662,665,667],{"class":71,"line":661},15,[69,663,664],{"class":75},"  \u003C\u002F",[69,666,47],{"class":79},[69,668,110],{"class":75},[69,670,672,674,676],{"class":71,"line":671},16,[69,673,128],{"class":75},[69,675,589],{"class":79},[69,677,110],{"class":75},[17,679,680,681,683,684,687],{},"The directive only cares about each option's ",[21,682,37],{}," attribute; the visible label can be anything. ",[21,685,686],{},"\u003Coptgroup>"," works the same way: the directive reads option values whether or not they're nested under a group label.",[49,689,691],{"id":690},"where-to-next","Where to next",[693,694,695,703,710],"ul",{},[696,697,698,702],"li",{},[434,699,701],{"href":700},"\u002Fdocs\u002Fbinding-inputs\u002Fradio","Radio groups",": single-pick counterpart in radio form; reach for it when the option set is short enough to show inline.",[696,704,705,709],{},[434,706,708],{"href":707},"\u002Fdocs\u002Fbinding-inputs\u002Fcheckbox","Checkbox & checkbox groups",": array shape via grouped checkboxes.",[696,711,712,714,715,717],{},[434,713,437],{"href":436},": how ",[21,716,37],{}," strings map to non-string leaf types.",[719,720,721],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":65,"searchDepth":113,"depth":113,"links":723},[724,725,726,728,729],{"id":51,"depth":113,"text":52},{"id":149,"depth":113,"text":150},{"id":338,"depth":113,"text":727},"The .number modifier",{"id":441,"depth":113,"text":442},{"id":690,"depth":113,"text":691},"\u003Cselect> binds to a single picked value; \u003Cselect multiple> binds to an array of picked values. The directive reads the schema leaf type and picks the mode automatically.","md",{},[734,737,740,742],{"label":735,"value":736},"Category","Directive binding",{"label":738,"value":739,"kind":21},"Element","\u003Cselect> · \u003Cselect multiple>",{"label":741,"value":342,"kind":21},"Modifiers",{"label":743,"value":744,"kind":21},"Leaf types","scalar (single) · readonly Value[] (multiple)","\u002Fdocs\u002Fbinding-inputs\u002Fselect",{"title":5,"description":730},null,"docs\u002Fbinding-inputs\u002Fselect","H6AyvdXIG9dh0l6ViZ_DRQcv2RdITq_m7dI-m49tSM0",1780949759248]