[{"data":1,"prerenderedAt":817},["ShallowReactive",2],{"content-en-\u002Fexamples\u002Faddress-input":3},{"id":4,"title":5,"body":6,"description":810,"extension":811,"meta":812,"navigation":141,"path":813,"seo":814,"stem":815,"__hash__":816},"content_en\u002Fexamples\u002Faddress-input.md","Address input",{"type":7,"value":8,"toc":808},"minimark",[9,13,26,804],[10,11,5],"h1",{"id":12},"address-input",[14,15,16,17,21,22,25],"p",{},"Select a prefecture to load its municipalities into a dropdown. Uses ",[18,19,20],"code",{},"listPrefectures"," and ",[18,23,24],{},"listMunicipalitiesByPrefecture",". Town\u002Fstreet and building fields are decorative only (not passed to the API).",[27,28,29,36,330],"example-pair",{},[30,31,33],"template",{"v-slot:demo":32},"",[34,35],"address-input-demo",{},[30,37,38],{"v-slot:html":32},[39,40,44],"pre",{"className":41,"code":42,"language":43,"meta":32,"style":32},"language-html shiki shiki-themes github-light github-dark","\u003Clabel for=\"prefecture\">Prefecture\u003C\u002Flabel>\n\u003Cselect id=\"prefecture\">\n  \u003Coption value=\"\">Select a prefecture\u003C\u002Foption>\n  \u003C!-- Fill options with listPrefectures() -->\n\u003C\u002Fselect>\n\n\u003Clabel for=\"municipality\">Municipality\u003C\u002Flabel>\n\u003Cselect id=\"municipality\" disabled>\n  \u003Coption value=\"\">Select a municipality\u003C\u002Foption>\n  \u003C!-- On prefecture change, fill with listMunicipalitiesByPrefecture() -->\n\u003C\u002Fselect>\n\n\u003Clabel for=\"town\">Town \u002F street address\u003C\u002Flabel>\n\u003Cinput id=\"town\" type=\"text\" placeholder=\"e.g. Marunouchi 1-1-1\" \u002F>\n\n\u003Clabel for=\"building\">Building name\u003C\u002Flabel>\n\u003Cinput id=\"building\" type=\"text\" placeholder=\"e.g. Foo Building 3F\" \u002F>\n","html",[18,45,46,78,95,119,126,136,143,164,182,202,208,217,222,243,276,281,302],{"__ignoreMap":32},[47,48,51,55,59,63,66,70,73,75],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sVt8B","\u003C",[47,56,58],{"class":57},"s9eBZ","label",[47,60,62],{"class":61},"sScJk"," for",[47,64,65],{"class":53},"=",[47,67,69],{"class":68},"sZZnC","\"prefecture\"",[47,71,72],{"class":53},">Prefecture\u003C\u002F",[47,74,58],{"class":57},[47,76,77],{"class":53},">\n",[47,79,81,83,86,89,91,93],{"class":49,"line":80},2,[47,82,54],{"class":53},[47,84,85],{"class":57},"select",[47,87,88],{"class":61}," id",[47,90,65],{"class":53},[47,92,69],{"class":68},[47,94,77],{"class":53},[47,96,98,101,104,107,109,112,115,117],{"class":49,"line":97},3,[47,99,100],{"class":53},"  \u003C",[47,102,103],{"class":57},"option",[47,105,106],{"class":61}," value",[47,108,65],{"class":53},[47,110,111],{"class":68},"\"\"",[47,113,114],{"class":53},">Select a prefecture\u003C\u002F",[47,116,103],{"class":57},[47,118,77],{"class":53},[47,120,122],{"class":49,"line":121},4,[47,123,125],{"class":124},"sJ8bj","  \u003C!-- Fill options with listPrefectures() -->\n",[47,127,129,132,134],{"class":49,"line":128},5,[47,130,131],{"class":53},"\u003C\u002F",[47,133,85],{"class":57},[47,135,77],{"class":53},[47,137,139],{"class":49,"line":138},6,[47,140,142],{"emptyLinePlaceholder":141},true,"\n",[47,144,146,148,150,152,154,157,160,162],{"class":49,"line":145},7,[47,147,54],{"class":53},[47,149,58],{"class":57},[47,151,62],{"class":61},[47,153,65],{"class":53},[47,155,156],{"class":68},"\"municipality\"",[47,158,159],{"class":53},">Municipality\u003C\u002F",[47,161,58],{"class":57},[47,163,77],{"class":53},[47,165,167,169,171,173,175,177,180],{"class":49,"line":166},8,[47,168,54],{"class":53},[47,170,85],{"class":57},[47,172,88],{"class":61},[47,174,65],{"class":53},[47,176,156],{"class":68},[47,178,179],{"class":61}," disabled",[47,181,77],{"class":53},[47,183,185,187,189,191,193,195,198,200],{"class":49,"line":184},9,[47,186,100],{"class":53},[47,188,103],{"class":57},[47,190,106],{"class":61},[47,192,65],{"class":53},[47,194,111],{"class":68},[47,196,197],{"class":53},">Select a municipality\u003C\u002F",[47,199,103],{"class":57},[47,201,77],{"class":53},[47,203,205],{"class":49,"line":204},10,[47,206,207],{"class":124},"  \u003C!-- On prefecture change, fill with listMunicipalitiesByPrefecture() -->\n",[47,209,211,213,215],{"class":49,"line":210},11,[47,212,131],{"class":53},[47,214,85],{"class":57},[47,216,77],{"class":53},[47,218,220],{"class":49,"line":219},12,[47,221,142],{"emptyLinePlaceholder":141},[47,223,225,227,229,231,233,236,239,241],{"class":49,"line":224},13,[47,226,54],{"class":53},[47,228,58],{"class":57},[47,230,62],{"class":61},[47,232,65],{"class":53},[47,234,235],{"class":68},"\"town\"",[47,237,238],{"class":53},">Town \u002F street address\u003C\u002F",[47,240,58],{"class":57},[47,242,77],{"class":53},[47,244,246,248,251,253,255,257,260,262,265,268,270,273],{"class":49,"line":245},14,[47,247,54],{"class":53},[47,249,250],{"class":57},"input",[47,252,88],{"class":61},[47,254,65],{"class":53},[47,256,235],{"class":68},[47,258,259],{"class":61}," type",[47,261,65],{"class":53},[47,263,264],{"class":68},"\"text\"",[47,266,267],{"class":61}," placeholder",[47,269,65],{"class":53},[47,271,272],{"class":68},"\"e.g. Marunouchi 1-1-1\"",[47,274,275],{"class":53}," \u002F>\n",[47,277,279],{"class":49,"line":278},15,[47,280,142],{"emptyLinePlaceholder":141},[47,282,284,286,288,290,292,295,298,300],{"class":49,"line":283},16,[47,285,54],{"class":53},[47,287,58],{"class":57},[47,289,62],{"class":61},[47,291,65],{"class":53},[47,293,294],{"class":68},"\"building\"",[47,296,297],{"class":53},">Building name\u003C\u002F",[47,299,58],{"class":57},[47,301,77],{"class":53},[47,303,305,307,309,311,313,315,317,319,321,323,325,328],{"class":49,"line":304},17,[47,306,54],{"class":53},[47,308,250],{"class":57},[47,310,88],{"class":61},[47,312,65],{"class":53},[47,314,294],{"class":68},[47,316,259],{"class":61},[47,318,65],{"class":53},[47,320,264],{"class":68},[47,322,267],{"class":61},[47,324,65],{"class":53},[47,326,327],{"class":68},"\"e.g. Foo Building 3F\"",[47,329,275],{"class":53},[30,331,332],{"v-slot:ts":32},[39,333,337],{"className":334,"code":335,"language":336,"meta":32,"style":32},"language-ts shiki shiki-themes github-light github-dark","import { createLocalGovClient } from \"@b4moss\u002Fjp-local-gov-id\";\nimport dataset from \"@b4moss\u002Fjp-local-gov-id-data\";\n\nconst client = await createLocalGovClient({ data: dataset });\n\nconst prefSelect = document.querySelector(\"#prefecture\");\nconst muniSelect = document.querySelector(\"#municipality\");\n\nfor (const pref of client.listPrefectures()) {\n  const option = document.createElement(\"option\");\n  option.value = pref.code;\n  option.textContent = pref.name;\n  prefSelect.append(option);\n}\n\nprefSelect.addEventListener(\"change\", async () => {\n  muniSelect.replaceChildren();\n  const placeholder = document.createElement(\"option\");\n  placeholder.value = \"\";\n  placeholder.textContent = \"Select a municipality\";\n  muniSelect.append(placeholder);\n\n  if (!prefSelect.value) {\n    muniSelect.disabled = true;\n    return;\n  }\n\n  const municipalities = await client.listMunicipalitiesByPrefecture(\n    prefSelect.value,\n  );\n  for (const muni of municipalities) {\n    const option = document.createElement(\"option\");\n    option.value = muni.code;\n    option.textContent = muni.name;\n    muniSelect.append(option);\n  }\n  muniSelect.disabled = false;\n});\n","ts",[18,338,339,357,371,375,396,400,424,444,448,472,494,504,514,525,530,534,562,573,592,605,618,628,633,647,660,668,674,679,698,704,710,728,748,759,770,780,785,798],{"__ignoreMap":32},[47,340,341,345,348,351,354],{"class":49,"line":50},[47,342,344],{"class":343},"szBVR","import",[47,346,347],{"class":53}," { createLocalGovClient } ",[47,349,350],{"class":343},"from",[47,352,353],{"class":68}," \"@b4moss\u002Fjp-local-gov-id\"",[47,355,356],{"class":53},";\n",[47,358,359,361,364,366,369],{"class":49,"line":80},[47,360,344],{"class":343},[47,362,363],{"class":53}," dataset ",[47,365,350],{"class":343},[47,367,368],{"class":68}," \"@b4moss\u002Fjp-local-gov-id-data\"",[47,370,356],{"class":53},[47,372,373],{"class":49,"line":97},[47,374,142],{"emptyLinePlaceholder":141},[47,376,377,380,384,387,390,393],{"class":49,"line":121},[47,378,379],{"class":343},"const",[47,381,383],{"class":382},"sj4cs"," client",[47,385,386],{"class":343}," =",[47,388,389],{"class":343}," await",[47,391,392],{"class":61}," createLocalGovClient",[47,394,395],{"class":53},"({ data: dataset });\n",[47,397,398],{"class":49,"line":128},[47,399,142],{"emptyLinePlaceholder":141},[47,401,402,404,407,409,412,415,418,421],{"class":49,"line":138},[47,403,379],{"class":343},[47,405,406],{"class":382}," prefSelect",[47,408,386],{"class":343},[47,410,411],{"class":53}," document.",[47,413,414],{"class":61},"querySelector",[47,416,417],{"class":53},"(",[47,419,420],{"class":68},"\"#prefecture\"",[47,422,423],{"class":53},");\n",[47,425,426,428,431,433,435,437,439,442],{"class":49,"line":145},[47,427,379],{"class":343},[47,429,430],{"class":382}," muniSelect",[47,432,386],{"class":343},[47,434,411],{"class":53},[47,436,414],{"class":61},[47,438,417],{"class":53},[47,440,441],{"class":68},"\"#municipality\"",[47,443,423],{"class":53},[47,445,446],{"class":49,"line":166},[47,447,142],{"emptyLinePlaceholder":141},[47,449,450,453,456,458,461,464,467,469],{"class":49,"line":184},[47,451,452],{"class":343},"for",[47,454,455],{"class":53}," (",[47,457,379],{"class":343},[47,459,460],{"class":382}," pref",[47,462,463],{"class":343}," of",[47,465,466],{"class":53}," client.",[47,468,20],{"class":61},[47,470,471],{"class":53},"()) {\n",[47,473,474,477,480,482,484,487,489,492],{"class":49,"line":204},[47,475,476],{"class":343},"  const",[47,478,479],{"class":382}," option",[47,481,386],{"class":343},[47,483,411],{"class":53},[47,485,486],{"class":61},"createElement",[47,488,417],{"class":53},[47,490,491],{"class":68},"\"option\"",[47,493,423],{"class":53},[47,495,496,499,501],{"class":49,"line":210},[47,497,498],{"class":53},"  option.value ",[47,500,65],{"class":343},[47,502,503],{"class":53}," pref.code;\n",[47,505,506,509,511],{"class":49,"line":219},[47,507,508],{"class":53},"  option.textContent ",[47,510,65],{"class":343},[47,512,513],{"class":53}," pref.name;\n",[47,515,516,519,522],{"class":49,"line":224},[47,517,518],{"class":53},"  prefSelect.",[47,520,521],{"class":61},"append",[47,523,524],{"class":53},"(option);\n",[47,526,527],{"class":49,"line":245},[47,528,529],{"class":53},"}\n",[47,531,532],{"class":49,"line":278},[47,533,142],{"emptyLinePlaceholder":141},[47,535,536,539,542,544,547,550,553,556,559],{"class":49,"line":283},[47,537,538],{"class":53},"prefSelect.",[47,540,541],{"class":61},"addEventListener",[47,543,417],{"class":53},[47,545,546],{"class":68},"\"change\"",[47,548,549],{"class":53},", ",[47,551,552],{"class":343},"async",[47,554,555],{"class":53}," () ",[47,557,558],{"class":343},"=>",[47,560,561],{"class":53}," {\n",[47,563,564,567,570],{"class":49,"line":304},[47,565,566],{"class":53},"  muniSelect.",[47,568,569],{"class":61},"replaceChildren",[47,571,572],{"class":53},"();\n",[47,574,576,578,580,582,584,586,588,590],{"class":49,"line":575},18,[47,577,476],{"class":343},[47,579,267],{"class":382},[47,581,386],{"class":343},[47,583,411],{"class":53},[47,585,486],{"class":61},[47,587,417],{"class":53},[47,589,491],{"class":68},[47,591,423],{"class":53},[47,593,595,598,600,603],{"class":49,"line":594},19,[47,596,597],{"class":53},"  placeholder.value ",[47,599,65],{"class":343},[47,601,602],{"class":68}," \"\"",[47,604,356],{"class":53},[47,606,608,611,613,616],{"class":49,"line":607},20,[47,609,610],{"class":53},"  placeholder.textContent ",[47,612,65],{"class":343},[47,614,615],{"class":68}," \"Select a municipality\"",[47,617,356],{"class":53},[47,619,621,623,625],{"class":49,"line":620},21,[47,622,566],{"class":53},[47,624,521],{"class":61},[47,626,627],{"class":53},"(placeholder);\n",[47,629,631],{"class":49,"line":630},22,[47,632,142],{"emptyLinePlaceholder":141},[47,634,636,639,641,644],{"class":49,"line":635},23,[47,637,638],{"class":343},"  if",[47,640,455],{"class":53},[47,642,643],{"class":343},"!",[47,645,646],{"class":53},"prefSelect.value) {\n",[47,648,650,653,655,658],{"class":49,"line":649},24,[47,651,652],{"class":53},"    muniSelect.disabled ",[47,654,65],{"class":343},[47,656,657],{"class":382}," true",[47,659,356],{"class":53},[47,661,663,666],{"class":49,"line":662},25,[47,664,665],{"class":343},"    return",[47,667,356],{"class":53},[47,669,671],{"class":49,"line":670},26,[47,672,673],{"class":53},"  }\n",[47,675,677],{"class":49,"line":676},27,[47,678,142],{"emptyLinePlaceholder":141},[47,680,682,684,687,689,691,693,695],{"class":49,"line":681},28,[47,683,476],{"class":343},[47,685,686],{"class":382}," municipalities",[47,688,386],{"class":343},[47,690,389],{"class":343},[47,692,466],{"class":53},[47,694,24],{"class":61},[47,696,697],{"class":53},"(\n",[47,699,701],{"class":49,"line":700},29,[47,702,703],{"class":53},"    prefSelect.value,\n",[47,705,707],{"class":49,"line":706},30,[47,708,709],{"class":53},"  );\n",[47,711,713,716,718,720,723,725],{"class":49,"line":712},31,[47,714,715],{"class":343},"  for",[47,717,455],{"class":53},[47,719,379],{"class":343},[47,721,722],{"class":382}," muni",[47,724,463],{"class":343},[47,726,727],{"class":53}," municipalities) {\n",[47,729,731,734,736,738,740,742,744,746],{"class":49,"line":730},32,[47,732,733],{"class":343},"    const",[47,735,479],{"class":382},[47,737,386],{"class":343},[47,739,411],{"class":53},[47,741,486],{"class":61},[47,743,417],{"class":53},[47,745,491],{"class":68},[47,747,423],{"class":53},[47,749,751,754,756],{"class":49,"line":750},33,[47,752,753],{"class":53},"    option.value ",[47,755,65],{"class":343},[47,757,758],{"class":53}," muni.code;\n",[47,760,762,765,767],{"class":49,"line":761},34,[47,763,764],{"class":53},"    option.textContent ",[47,766,65],{"class":343},[47,768,769],{"class":53}," muni.name;\n",[47,771,773,776,778],{"class":49,"line":772},35,[47,774,775],{"class":53},"    muniSelect.",[47,777,521],{"class":61},[47,779,524],{"class":53},[47,781,783],{"class":49,"line":782},36,[47,784,673],{"class":53},[47,786,788,791,793,796],{"class":49,"line":787},37,[47,789,790],{"class":53},"  muniSelect.disabled ",[47,792,65],{"class":343},[47,794,795],{"class":382}," false",[47,797,356],{"class":53},[47,799,801],{"class":49,"line":800},38,[47,802,803],{"class":53},"});\n",[805,806,807],"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 pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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}",{"title":32,"searchDepth":80,"depth":80,"links":809},[],"Address form sample with prefecture and municipality selects","md",{},"\u002Fexamples\u002Faddress-input",{"title":5,"description":810},"examples\u002Faddress-input","BpKIrwtyt2gth23sPOkSIG7rE-gSUwIHPkrtn3auDgU",1786532353796]