[{"data":1,"prerenderedAt":2931},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Finput":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Finput":1564},{"id":4,"title":5,"body":6,"description":1555,"extension":1556,"meta":1557,"nav":1558,"navigation":1559,"path":1560,"seo":1561,"stem":1562,"__hash__":1563},"content_en\u002Fen\u002Fcomponents\u002Finput.md","Input",{"type":7,"value":8,"toc":1544},"minimark",[9,13,31,61,66,92,171,175,193,275,279,291,350,354,388,503,507,532,599,603,613,673,677,685,724,833,868,910,914,922,995,1014,1102,1106,1434,1468,1512,1540],[10,11,5],"h1",{"id":12},"input",[14,15,16,17,21,22,25,26,30],"p",{},"The input allows users to enter single-line or multi-line text. Its styling and behavior reproduce the WinUI 3 (Windows App SDK) ",[18,19,20],"strong",{},"TextBox"," and ",[18,23,24],{},"PasswordBox",": the three-line template (header \u002F control \u002F description), the elevated stroke with bottom highlight, the password reveal button with the ",[27,28,29],"code",{},"Alt+F8"," shortcut, and the mask character and password reveal modes are all checked against the source line by line.",[14,32,33,34,39,40,46,47,50,51,56,57,60],{},"The password form has two mask paths, and the trade-off is described in ",[35,36,38],"a",{"href":37},"#password-box","Password Box",": ",[18,41,42,43],{},"without ",[27,44,45],{},"passwordChar"," it uses the native browser ",[27,48,49],{},"type=\"password\""," (keeping the \"password field\" semantics for password managers \u002F IMEs \u002F screen readers, with the mask glyph determined by the browser); ",[18,52,53,54],{},"with ",[27,55,45],{}," it uses a \"display buffer\" mask (glyph-accurate, but the field is ",[27,58,59],{},"type=\"text\""," in masked state, so screen readers and password managers no longer recognize it as a password field).",[62,63,65],"h2",{"id":64},"basic-usage","Basic usage",[14,67,68,69,72,73,76,77,76,80,83,84,87,88,91],{},"Bind a string value with ",[27,70,71],{},"v-model","; events and native attributes (",[27,74,75],{},"autocomplete",", ",[27,78,79],{},"maxlength",[27,81,82],{},"aria-describedby","…) pass through directly to the internal ",[27,85,86],{},"\u003Cinput>"," \u002F ",[27,89,90],{},"\u003Ctextarea>",".",[93,94,95,102],"demo-block",{"title":65},[96,97,99],"template",{"v-slot:preview":98},"",[100,101],"input-basic-demo",{},[96,103,104],{"v-slot:code":98},[105,106,110],"pre",{"className":107,"code":108,"language":109,"meta":98,"style":98},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereInput v-model=\"value\" placeholder=\"Enter text\" \u002F>\n\u003CFluereInput placeholder=\"Disabled\" disabled \u002F>\n","vue",[27,111,112,152],{"__ignoreMap":98},[113,114,117,121,125,129,132,136,139,141,144,146,149],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sVt8B","\u003C",[113,122,124],{"class":123},"s9eBZ","FluereInput",[113,126,128],{"class":127},"sScJk"," v-model",[113,130,131],{"class":119},"=",[113,133,135],{"class":134},"sZZnC","\"",[113,137,138],{"class":119},"value",[113,140,135],{"class":134},[113,142,143],{"class":127}," placeholder",[113,145,131],{"class":119},[113,147,148],{"class":134},"\"Enter text\"",[113,150,151],{"class":119}," \u002F>\n",[113,153,155,157,159,161,163,166,169],{"class":115,"line":154},2,[113,156,120],{"class":119},[113,158,124],{"class":123},[113,160,143],{"class":127},[113,162,131],{"class":119},[113,164,165],{"class":134},"\"Disabled\"",[113,167,168],{"class":127}," disabled",[113,170,151],{"class":119},[62,172,174],{"id":173},"sizes","Sizes",[14,176,177,180,181,184,185,188,189,192],{},[27,178,179],{},"size"," takes ",[27,182,183],{},"small"," (24px) \u002F ",[27,186,187],{},"medium"," (32px, default) \u002F ",[27,190,191],{},"large"," (40px). The WinUI TextBox only has the 32px tier; the size tiers are an extension of this library. The header and description font sizes follow the selected size tier.",[93,194,195,200],{"title":174},[96,196,197],{"v-slot:preview":98},[198,199],"input-size-demo",{},[96,201,202],{"v-slot:code":98},[105,203,205],{"className":107,"code":204,"language":109,"meta":98,"style":98},"\u003CFluereInput size=\"small\" placeholder=\"Small (24px)\" \u002F>\n\u003CFluereInput size=\"medium\" placeholder=\"Medium (32px)\" \u002F>\n\u003CFluereInput size=\"large\" placeholder=\"Large (40px)\" \u002F>\n",[27,206,207,230,252],{"__ignoreMap":98},[113,208,209,211,213,216,218,221,223,225,228],{"class":115,"line":116},[113,210,120],{"class":119},[113,212,124],{"class":123},[113,214,215],{"class":127}," size",[113,217,131],{"class":119},[113,219,220],{"class":134},"\"small\"",[113,222,143],{"class":127},[113,224,131],{"class":119},[113,226,227],{"class":134},"\"Small (24px)\"",[113,229,151],{"class":119},[113,231,232,234,236,238,240,243,245,247,250],{"class":115,"line":154},[113,233,120],{"class":119},[113,235,124],{"class":123},[113,237,215],{"class":127},[113,239,131],{"class":119},[113,241,242],{"class":134},"\"medium\"",[113,244,143],{"class":127},[113,246,131],{"class":119},[113,248,249],{"class":134},"\"Medium (32px)\"",[113,251,151],{"class":119},[113,253,255,257,259,261,263,266,268,270,273],{"class":115,"line":254},3,[113,256,120],{"class":119},[113,258,124],{"class":123},[113,260,215],{"class":127},[113,262,131],{"class":119},[113,264,265],{"class":134},"\"large\"",[113,267,143],{"class":127},[113,269,131],{"class":119},[113,271,272],{"class":134},"\"Large (40px)\"",[113,274,151],{"class":119},[62,276,278],{"id":277},"appearance","Appearance",[14,280,281,180,283,286,287,290],{},[27,282,277],{},[27,284,285],{},"outline"," (default, WinUI's \"elevated stroke\": light on top \u002F left \u002F right and heavy on the bottom edge) or ",[27,288,289],{},"underline"," (only the bottom edge remains; a library extension).",[93,292,293,298],{"title":278},[96,294,295],{"v-slot:preview":98},[296,297],"input-appearance-demo",{},[96,299,300],{"v-slot:code":98},[105,301,303],{"className":107,"code":302,"language":109,"meta":98,"style":98},"\u003CFluereInput appearance=\"outline\" placeholder=\"Outline (default)\" \u002F>\n\u003CFluereInput appearance=\"underline\" placeholder=\"Underline\" \u002F>\n",[27,304,305,328],{"__ignoreMap":98},[113,306,307,309,311,314,316,319,321,323,326],{"class":115,"line":116},[113,308,120],{"class":119},[113,310,124],{"class":123},[113,312,313],{"class":127}," appearance",[113,315,131],{"class":119},[113,317,318],{"class":134},"\"outline\"",[113,320,143],{"class":127},[113,322,131],{"class":119},[113,324,325],{"class":134},"\"Outline (default)\"",[113,327,151],{"class":119},[113,329,330,332,334,336,338,341,343,345,348],{"class":115,"line":154},[113,331,120],{"class":119},[113,333,124],{"class":123},[113,335,313],{"class":127},[113,337,131],{"class":119},[113,339,340],{"class":134},"\"underline\"",[113,342,143],{"class":127},[113,344,131],{"class":119},[113,346,347],{"class":134},"\"Underline\"",[113,349,151],{"class":119},[62,351,353],{"id":352},"header-and-description","Header and description",[14,355,356,359,360,363,364,367,368,371,372,375,376,87,379,381,382,87,385,387],{},[27,357,358],{},"header"," renders above the control (WinUI ",[27,361,362],{},"TextBox.Header",", with an 8px bottom margin), and ",[27,365,366],{},"description"," renders below the control (",[27,369,370],{},"TextBox.Description",", with the foreground taken from ",[27,373,374],{},"TextFillColorSecondary","). They respectively become the source of the input's ",[27,377,378],{},"aria-labelledby",[27,380,82],{},", and can also be replaced with same-named slots; when consumers explicitly pass ",[27,383,384],{},"aria-label",[27,386,82],{},", they are not overridden.",[93,389,390,395],{"title":353},[96,391,392],{"v-slot:preview":98},[393,394],"input-header-demo",{},[96,396,397],{"v-slot:code":98},[105,398,400],{"className":107,"code":399,"language":109,"meta":98,"style":98},"\u003CFluereInput v-model=\"displayName\" header=\"Display name\" description=\"Shown on your profile page\" \u002F>\n\u003CFluereInput\n  v-model=\"email\"\n  type=\"email\"\n  description=\"Used for notifications; never shown publicly\"\n>\n  \u003Ctemplate #header>Email \u003Cspan class=\"text-colorStatusDangerForeground1\">*\u003C\u002Fspan>\u003C\u002Ftemplate>\n\u003C\u002FFluereInput>\n",[27,401,402,437,444,459,470,481,487,493],{"__ignoreMap":98},[113,403,404,406,408,410,412,414,417,419,422,424,427,430,432,435],{"class":115,"line":116},[113,405,120],{"class":119},[113,407,124],{"class":123},[113,409,128],{"class":127},[113,411,131],{"class":119},[113,413,135],{"class":134},[113,415,416],{"class":119},"displayName",[113,418,135],{"class":134},[113,420,421],{"class":127}," header",[113,423,131],{"class":119},[113,425,426],{"class":134},"\"Display name\"",[113,428,429],{"class":127}," description",[113,431,131],{"class":119},[113,433,434],{"class":134},"\"Shown on your profile page\"",[113,436,151],{"class":119},[113,438,439,441],{"class":115,"line":154},[113,440,120],{"class":119},[113,442,443],{"class":123},"FluereInput\n",[113,445,446,449,451,453,456],{"class":115,"line":254},[113,447,448],{"class":127},"  v-model",[113,450,131],{"class":119},[113,452,135],{"class":134},[113,454,455],{"class":119},"email",[113,457,458],{"class":134},"\"\n",[113,460,462,465,467],{"class":115,"line":461},4,[113,463,464],{"class":127},"  type",[113,466,131],{"class":119},[113,468,469],{"class":134},"\"email\"\n",[113,471,473,476,478],{"class":115,"line":472},5,[113,474,475],{"class":127},"  description",[113,477,131],{"class":119},[113,479,480],{"class":134},"\"Used for notifications; never shown publicly\"\n",[113,482,484],{"class":115,"line":483},6,[113,485,486],{"class":119},">\n",[113,488,490],{"class":115,"line":489},7,[113,491,492],{"class":119},"  \u003Ctemplate #header>Email \u003Cspan class=\"text-colorStatusDangerForeground1\">*\u003C\u002Fspan>\u003C\u002Ftemplate>\n",[113,494,496,499,501],{"class":115,"line":495},8,[113,497,498],{"class":119},"\u003C\u002F",[113,500,124],{"class":123},[113,502,486],{"class":119},[62,504,506],{"id":505},"multiline-text","Multiline text",[14,508,509,512,513,516,517,520,521,523,524,527,528,531],{},[27,510,511],{},"multiline"," corresponds to WinUI ",[27,514,515],{},"TextBox.AcceptsReturn = true"," + ",[27,518,519],{},"TextWrapping = Wrap"," and renders a ",[27,522,90],{},": its height expands by ",[27,525,526],{},"rows"," (default 3), with the lower bound being the size tier height (WinUI ",[27,529,530],{},"MinHeight"," 32), and the bottom-right corner can be dragged to adjust the height.",[93,533,534,539],{"title":506},[96,535,536],{"v-slot:preview":98},[537,538],"input-multiline-demo",{},[96,540,541],{"v-slot:code":98},[105,542,544],{"className":107,"code":543,"language":109,"meta":98,"style":98},"\u003CFluereInput\n  v-model=\"note\"\n  multiline\n  header=\"Notes\"\n  description=\"3 rows by default; drag the bottom-right corner to resize\"\n\u002F>\n\u003CFluereInput v-model=\"feedback\" multiline :rows=\"6\" header=\"Feedback\" \u002F>\n",[27,545,546,552,565,570,580,589,594],{"__ignoreMap":98},[113,547,548,550],{"class":115,"line":116},[113,549,120],{"class":119},[113,551,443],{"class":123},[113,553,554,556,558,560,563],{"class":115,"line":154},[113,555,448],{"class":127},[113,557,131],{"class":119},[113,559,135],{"class":134},[113,561,562],{"class":119},"note",[113,564,458],{"class":134},[113,566,567],{"class":115,"line":254},[113,568,569],{"class":127},"  multiline\n",[113,571,572,575,577],{"class":115,"line":461},[113,573,574],{"class":127},"  header",[113,576,131],{"class":119},[113,578,579],{"class":134},"\"Notes\"\n",[113,581,582,584,586],{"class":115,"line":472},[113,583,475],{"class":127},[113,585,131],{"class":119},[113,587,588],{"class":134},"\"3 rows by default; drag the bottom-right corner to resize\"\n",[113,590,591],{"class":115,"line":483},[113,592,593],{"class":119},"\u002F>\n",[113,595,596],{"class":115,"line":489},[113,597,598],{"class":119},"\u003CFluereInput v-model=\"feedback\" multiline :rows=\"6\" header=\"Feedback\" \u002F>\n",[62,600,602],{"id":601},"error-state","Error state",[14,604,605,608,609,612],{},[27,606,607],{},"invalid"," is a library extension (the WinUI TextBox has no built-in error state): it switches to the status-danger stroke and renders ",[27,610,611],{},"aria-invalid",", and the bottom highlight also uses danger when focused.",[93,614,615,620],{"title":602},[96,616,617],{"v-slot:preview":98},[618,619],"input-invalid-demo",{},[96,621,622],{"v-slot:code":98},[105,623,625],{"className":107,"code":624,"language":109,"meta":98,"style":98},"\u003CFluereInput invalid placeholder=\"Invalid input\" aria-describedby=\"input-error-hint\" \u002F>\n\u003Cp id=\"input-error-hint\">Please enter a valid value.\u003C\u002Fp>\n",[27,626,627,653],{"__ignoreMap":98},[113,628,629,631,633,636,638,640,643,646,648,651],{"class":115,"line":116},[113,630,120],{"class":119},[113,632,124],{"class":123},[113,634,635],{"class":127}," invalid",[113,637,143],{"class":127},[113,639,131],{"class":119},[113,641,642],{"class":134},"\"Invalid input\"",[113,644,645],{"class":127}," aria-describedby",[113,647,131],{"class":119},[113,649,650],{"class":134},"\"input-error-hint\"",[113,652,151],{"class":119},[113,654,655,657,659,662,664,666,669,671],{"class":115,"line":154},[113,656,120],{"class":119},[113,658,14],{"class":123},[113,660,661],{"class":127}," id",[113,663,131],{"class":119},[113,665,650],{"class":134},[113,667,668],{"class":119},">Please enter a valid value.\u003C\u002F",[113,670,14],{"class":123},[113,672,486],{"class":119},[62,674,676],{"id":675},"password-box","Password box",[14,678,679,681,682,684],{},[27,680,49],{}," corresponds to the WinUI ",[18,683,24],{},":",[686,687,688,709],"ul",{},[689,690,691,696,697,700,701,704,705,708],"li",{},[18,692,693,694],{},"Without ",[27,695,45],{},": native ",[27,698,699],{},"\u003Cinput type=\"password\">",". The mask glyph is determined by the browser (Chrome \u002F Firefox draw ",[27,702,703],{},"•",", while WinUI uses ",[27,706,707],{},"●",") — this is an unavoidable difference on the Web, but in exchange password managers, autofill, IME composition, and the screen-reader \"password field\" role all keep working as normal.",[689,710,711,716,717,719,720,723],{},[18,712,713,714],{},"With ",[27,715,45],{}," (the first code point is used when multiple characters are given): uses the \"display buffer\" mask, structurally isomorphic to WinUI handing the plaintext to the RichEdit password mode — the field contains the masked string, and the true value only lives in the component state, with each edit inferring the true value from the visible difference. The glyph matches the specified character exactly, at the cost that the field is ",[27,718,59],{}," in that state: ",[18,721,722],{},"screen readers no longer treat it as a password field",", and the browser no longer offers password saving \u002F filling.",[93,725,726,731],{"title":676},[96,727,728],{"v-slot:preview":98},[729,730],"input-password-demo",{},[96,732,733],{"v-slot:code":98},[105,734,736],{"className":107,"code":735,"language":109,"meta":98,"style":98},"\u003CFluereInput v-model=\"simple\" type=\"password\" placeholder=\"Enter password\" \u002F>\n\u003CFluereInput\n  v-model=\"custom\"\n  type=\"password\"\n  header=\"Password\"\n  placeholder=\"Enter password\"\n  password-char=\"#\"\n\u002F>\n",[27,737,738,772,778,791,800,809,819,829],{"__ignoreMap":98},[113,739,740,742,744,746,748,750,753,755,758,760,763,765,767,770],{"class":115,"line":116},[113,741,120],{"class":119},[113,743,124],{"class":123},[113,745,128],{"class":127},[113,747,131],{"class":119},[113,749,135],{"class":134},[113,751,752],{"class":119},"simple",[113,754,135],{"class":134},[113,756,757],{"class":127}," type",[113,759,131],{"class":119},[113,761,762],{"class":134},"\"password\"",[113,764,143],{"class":127},[113,766,131],{"class":119},[113,768,769],{"class":134},"\"Enter password\"",[113,771,151],{"class":119},[113,773,774,776],{"class":115,"line":154},[113,775,120],{"class":119},[113,777,443],{"class":123},[113,779,780,782,784,786,789],{"class":115,"line":254},[113,781,448],{"class":127},[113,783,131],{"class":119},[113,785,135],{"class":134},[113,787,788],{"class":119},"custom",[113,790,458],{"class":134},[113,792,793,795,797],{"class":115,"line":461},[113,794,464],{"class":127},[113,796,131],{"class":119},[113,798,799],{"class":134},"\"password\"\n",[113,801,802,804,806],{"class":115,"line":472},[113,803,574],{"class":127},[113,805,131],{"class":119},[113,807,808],{"class":134},"\"Password\"\n",[113,810,811,814,816],{"class":115,"line":483},[113,812,813],{"class":127},"  placeholder",[113,815,131],{"class":119},[113,817,818],{"class":134},"\"Enter password\"\n",[113,820,821,824,826],{"class":115,"line":489},[113,822,823],{"class":127},"  password-char",[113,825,131],{"class":119},[113,827,828],{"class":134},"\"#\"\n",[113,830,831],{"class":115,"line":495},[113,832,593],{"class":119},[834,835,836],"blockquote",{},[14,837,838,841,842,87,845,87,848,851,852,855,856,859,860,863,864,867],{},[18,839,840],{},"Copy interception (applies to both paths)",": in the masked state ",[27,843,844],{},"copy",[27,846,847],{},"cut",[27,849,850],{},"dragstart"," are all intercepted (the \"Copy\" entry in the context menu, ",[27,853,854],{},"Ctrl+C"," after selection, and dragging text all cannot retrieve the content), corresponding to WinUI's password mode offering no clipboard outlet and the text control's ",[27,857,858],{},"TXTBIT_DISABLEDDRAG",". When the plaintext is shown (",[27,861,862],{},"peek"," while held, or ",[27,865,866],{},"visible",") copying is allowed — consistent with the \"the eye-closed mode blocks copying\" behavior.",[834,869,870],{},[14,871,872,875,876,878,879,881,882,884,885,878,887,889,890,893,894,897,898,901,902,905,906,909],{},[18,873,874],{},"Browser-measured differences between the two paths",": the native path (no ",[27,877,45],{},") is a ",[27,880,49],{}," control whose mask glyph is the browser's ",[27,883,703],{},"; the display-buffer path (with ",[27,886,45],{},[27,888,59],{}," control whose mask glyph is the specified character (the ",[27,891,892],{},"#"," in the example). The editing behavior of both paths has been verified item by item in a real browser: insert in the middle \u002F backspace in the middle \u002F replace selection \u002F paste \u002F ",[27,895,896],{},"Ctrl+Z"," undo \u002F ",[27,899,900],{},"Ctrl+Shift+Z"," redo \u002F the true value after select-all-and-delete all match the input (given the same mask glyph, the true value is inferred from the ",[27,903,904],{},"beforeinput"," edit range + ",[27,907,908],{},"inputType",", not from glyph comparison).",[62,911,913],{"id":912},"reveal-password","Reveal password",[14,915,916,512,919,684],{},[27,917,918],{},"passwordRevealMode",[27,920,921],{},"PasswordBox.PasswordRevealMode",[923,924,925,938],"table",{},[926,927,928],"thead",{},[929,930,931,935],"tr",{},[932,933,934],"th",{},"Value",[932,936,937],{},"Behavior",[939,940,941,969,979],"tbody",{},[929,942,943,949],{},[944,945,946],"td",{},[27,947,948],{},"'peek'",[944,950,951,954,955,958,959,516,962,965,966,968],{},[18,952,953],{},"Default",". A \"show\" button appears on the right when focused + \"empty → non-empty\" during the current focus + the control width is wider than 5em; while ",[18,956,957],{},"held",", the plaintext is shown and released immediately re-masks it. The keyboard equivalent is holding ",[27,960,961],{},"Alt",[27,963,964],{},"F8"," (releasing ",[27,967,964],{}," re-masks)",[929,970,971,976],{},[944,972,973],{},[27,974,975],{},"'hidden'",[944,977,978],{},"Always masked, no button appears",[929,980,981,986],{},[944,982,983],{},[27,984,985],{},"'visible'",[944,987,988,989,87,992,994],{},"Always shows plaintext, no button appears (the official sample uses a CheckBox to toggle between ",[27,990,991],{},"hidden",[27,993,866],{},")",[14,996,997,998,1001,1002,1005,1006,1009,1010,1013],{},"A few details from the WinUI source (all guarded by contract tests): the button has ",[27,999,1000],{},"tabindex=\"-1\""," (",[27,1003,1004],{},"IsTabStop=False",") and does not enter the Tab sequence; on focus the button is hidden first and only appears once content has been typed from empty during the current focus; the button does not appear when the control width is less than 5em (the ",[27,1007,1008],{},"Minimum width … is 5em"," in ",[27,1011,1012],{},"ArrangeOverride",").",[93,1015,1016,1021],{"title":913},[96,1017,1018],{"v-slot:preview":98},[1019,1020],"input-password-reveal-demo",{},[96,1022,1023],{"v-slot:code":98},[105,1024,1026],{"className":107,"code":1025,"language":109,"meta":98,"style":98},"\u003CFluereInput\n  v-model=\"password\"\n  type=\"password\"\n  aria-label=\"Example password field\"\n  :password-reveal-mode=\"showPassword ? 'visible' : 'hidden'\"\n\u002F>\n\u003CFluereCheckbox v-model=\"showPassword\">Show password\u003C\u002FFluereCheckbox>\n",[27,1027,1028,1034,1047,1055,1065,1093,1097],{"__ignoreMap":98},[113,1029,1030,1032],{"class":115,"line":116},[113,1031,120],{"class":119},[113,1033,443],{"class":123},[113,1035,1036,1038,1040,1042,1045],{"class":115,"line":154},[113,1037,448],{"class":127},[113,1039,131],{"class":119},[113,1041,135],{"class":134},[113,1043,1044],{"class":119},"password",[113,1046,458],{"class":134},[113,1048,1049,1051,1053],{"class":115,"line":254},[113,1050,464],{"class":127},[113,1052,131],{"class":119},[113,1054,799],{"class":134},[113,1056,1057,1060,1062],{"class":115,"line":461},[113,1058,1059],{"class":127},"  aria-label",[113,1061,131],{"class":119},[113,1063,1064],{"class":134},"\"Example password field\"\n",[113,1066,1067,1070,1073,1075,1077,1080,1084,1087,1090],{"class":115,"line":472},[113,1068,1069],{"class":119},"  :",[113,1071,1072],{"class":127},"password-reveal-mode",[113,1074,131],{"class":119},[113,1076,135],{"class":134},[113,1078,1079],{"class":119},"showPassword ",[113,1081,1083],{"class":1082},"szBVR","?",[113,1085,1086],{"class":134}," 'visible'",[113,1088,1089],{"class":1082}," :",[113,1091,1092],{"class":134}," 'hidden'\"\n",[113,1094,1095],{"class":115,"line":483},[113,1096,593],{"class":119},[113,1098,1099],{"class":115,"line":489},[113,1100,1101],{"class":119},"\u003CFluereCheckbox v-model=\"showPassword\">Show password\u003C\u002FFluereCheckbox>\n",[62,1103,1105],{"id":1104},"api","API",[923,1107,1108,1123],{},[926,1109,1110],{},[929,1111,1112,1115,1118,1120],{},[932,1113,1114],{},"Prop (Props)",[932,1116,1117],{},"Type",[932,1119,953],{},[932,1121,1122],{},"Description",[939,1124,1125,1147,1166,1191,1211,1230,1256,1274,1294,1316,1342,1363,1386,1412],{},[929,1126,1127,1132,1137,1142],{},[944,1128,1129],{},[27,1130,1131],{},"modelValue",[944,1133,1134],{},[27,1135,1136],{},"string",[944,1138,1139],{},[27,1140,1141],{},"—",[944,1143,1144,1145,994],{},"Input value (",[27,1146,71],{},[929,1148,1149,1153,1158,1163],{},[944,1150,1151],{},[27,1152,179],{},[944,1154,1155],{},[27,1156,1157],{},"'small' | 'medium' | 'large'",[944,1159,1160],{},[27,1161,1162],{},"'medium'",[944,1164,1165],{},"Size, with heights of 24 \u002F 32 \u002F 40 px respectively (WinUI default is 32)",[929,1167,1168,1172,1177,1182],{},[944,1169,1170],{},[27,1171,277],{},[944,1173,1174],{},[27,1175,1176],{},"'outline' | 'underline'",[944,1178,1179],{},[27,1180,1181],{},"'outline'",[944,1183,1184,1185,1187,1188,1190],{},"Appearance; ",[27,1186,285],{}," matches WinUI's \"elevated stroke\", ",[27,1189,289],{}," is a library extension (only the bottom edge remains)",[929,1192,1193,1198,1203,1208],{},[944,1194,1195],{},[27,1196,1197],{},"disabled",[944,1199,1200],{},[27,1201,1202],{},"boolean",[944,1204,1205],{},[27,1206,1207],{},"false",[944,1209,1210],{},"Whether the input is disabled",[929,1212,1213,1217,1221,1225],{},[944,1214,1215],{},[27,1216,607],{},[944,1218,1219],{},[27,1220,1202],{},[944,1222,1223],{},[27,1224,1207],{},[944,1226,1227,1228],{},"Invalid \u002F error state; a library extension (the WinUI TextBox has no built-in error state), also renders ",[27,1229,611],{},[929,1231,1232,1237,1242,1247],{},[944,1233,1234],{},[27,1235,1236],{},"type",[944,1238,1239],{},[27,1240,1241],{},"'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",[944,1243,1244],{},[27,1245,1246],{},"'text'",[944,1248,1249,1250,1252,1253,1255],{},"Native ",[27,1251,1236],{}," (ignored when ",[27,1254,511],{}," is true)",[929,1257,1258,1263,1267,1271],{},[944,1259,1260],{},[27,1261,1262],{},"placeholder",[944,1264,1265],{},[27,1266,1136],{},[944,1268,1269],{},[27,1270,1141],{},[944,1272,1273],{},"Placeholder",[929,1275,1276,1280,1284,1288],{},[944,1277,1278],{},[27,1279,358],{},[944,1281,1282],{},[27,1283,1136],{},[944,1285,1286],{},[27,1287,1141],{},[944,1289,1290,1291,1293],{},"Header, rendered above the control (WinUI ",[27,1292,362],{},"); also used as the accessible-name source",[929,1295,1296,1300,1304,1308],{},[944,1297,1298],{},[27,1299,366],{},[944,1301,1302],{},[27,1303,1136],{},[944,1305,1306],{},[27,1307,1141],{},[944,1309,1310,1311,1313,1314],{},"Description, rendered below the control (WinUI ",[27,1312,370],{},"), attached to ",[27,1315,82],{},[929,1317,1318,1322,1326,1330],{},[944,1319,1320],{},[27,1321,511],{},[944,1323,1324],{},[27,1325,1202],{},[944,1327,1328],{},[27,1329,1207],{},[944,1331,1332,1333,516,1336,1339,1340],{},"Multiline form (WinUI ",[27,1334,1335],{},"AcceptsReturn",[27,1337,1338],{},"TextWrapping=Wrap","), renders a ",[27,1341,90],{},[929,1343,1344,1348,1353,1358],{},[944,1345,1346],{},[27,1347,526],{},[944,1349,1350],{},[27,1351,1352],{},"number",[944,1354,1355],{},[27,1356,1357],{},"3",[944,1359,1360,1361,994],{},"Number of multiline rows (only takes effect with ",[27,1362,511],{},[929,1364,1365,1369,1374,1378],{},[944,1366,1367],{},[27,1368,918],{},[944,1370,1371],{},[27,1372,1373],{},"'peek' | 'hidden' | 'visible'",[944,1375,1376],{},[27,1377,948],{},[944,1379,1380,1381,1383,1384,994],{},"Password reveal mode (WinUI ",[27,1382,921],{},", only takes effect with ",[27,1385,49],{},[929,1387,1388,1392,1396,1400],{},[944,1389,1390],{},[27,1391,45],{},[944,1393,1394],{},[27,1395,1136],{},[944,1397,1398],{},[27,1399,1141],{},[944,1401,1402,1403,1406,1407,1409,1410,994],{},"Mask character (WinUI ",[27,1404,1405],{},"PasswordBox.PasswordChar","); without it the native ",[27,1408,49],{}," is used, with it the display-buffer mask is used (see ",[35,1411,38],{"href":37},[929,1413,1414,1419,1423,1428],{},[944,1415,1416],{},[27,1417,1418],{},"revealButtonLabel",[944,1420,1421],{},[27,1422,1136],{},[944,1424,1425],{},[27,1426,1427],{},"'Show password'",[944,1429,1430,1431,994],{},"Accessible name of the \"show\" button (corresponds to the WinUI localized string ",[27,1432,1433],{},"UIA_PASSWORDBOX_REVEAL",[923,1435,1436,1445],{},[926,1437,1438],{},[929,1439,1440,1443],{},[932,1441,1442],{},"Slot (Slots)",[932,1444,1122],{},[939,1446,1447,1459],{},[929,1448,1449,1453],{},[944,1450,1451],{},[27,1452,358],{},[944,1454,1455,1456,994],{},"Replaces the header content (WinUI ",[27,1457,1458],{},"HeaderTemplate",[929,1460,1461,1465],{},[944,1462,1463],{},[27,1464,366],{},[944,1466,1467],{},"Replaces the description content",[834,1469,1470],{},[14,1471,1472,39,1475,87,1477,1480,1481,1483,1484,87,1486,87,1489,87,1492,87,1495,1498,1499,76,1501,76,1503,1506,1507,87,1509,1511],{},[18,1473,1474],{},"No extra Events",[27,1476,1131],{},[27,1478,1479],{},"update:modelValue"," are provided by ",[27,1482,71],{},"; native events such as ",[27,1485,12],{},[27,1487,1488],{},"change",[27,1490,1491],{},"focus",[27,1493,1494],{},"blur",[27,1496,1497],{},"keydown"," and attributes such as ",[27,1500,75],{},[27,1502,79],{},[27,1504,1505],{},"aria-*"," fall through directly to the internal ",[27,1508,86],{},[27,1510,90],{},", so they can be passed as with a native field.",[834,1513,1514],{},[14,1515,1516,1519,1520,1522,1523,1525,1526,1528,1529,1531,1532,1535,1536,1539],{},[18,1517,1518],{},"Two known Web-side differences"," (both written into the component comments, not claimed as \"aligned with real hardware\"): ① with native ",[27,1521,49],{}," the mask glyph is determined by the browser and WinUI's ",[27,1524,707],{}," cannot be specified; to specify a glyph you must use the display-buffer path (",[27,1527,45],{},"), at the cost that screen readers \u002F password managers no longer recognize the password field. ② With an explicit ",[27,1530,45],{},", WinUI disables the IME in password mode (",[27,1533,1534],{},"InputScope = IS_PASSWORD","); the Web cannot disable the IME, so during IME composition ",[27,1537,1538],{},"-webkit-text-security"," is used to mask the plaintext, and the content is converged back into the masked string once composition ends.",[1541,1542,1543],"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}",{"title":98,"searchDepth":154,"depth":154,"links":1545},[1546,1547,1548,1549,1550,1551,1552,1553,1554],{"id":64,"depth":154,"text":65},{"id":173,"depth":154,"text":174},{"id":277,"depth":154,"text":278},{"id":352,"depth":154,"text":353},{"id":505,"depth":154,"text":506},{"id":601,"depth":154,"text":602},{"id":675,"depth":154,"text":676},{"id":912,"depth":154,"text":913},{"id":1104,"depth":154,"text":1105},"Input component, used to capture user text input, with support for header \u002F description, multiline, and password forms.","md",{},{"title":5},true,"\u002Fen\u002Fcomponents\u002Finput",{"title":5,"description":1555},"en\u002Fcomponents\u002Finput","Q3N05Q1MKS-TtQDKrTSWg_05EW8X7Ez7pTezonu0V0g",{"id":1565,"title":1566,"body":1567,"description":2924,"extension":1556,"meta":2925,"nav":2926,"navigation":1559,"path":2927,"seo":2928,"stem":2929,"__hash__":2930},"content\u002Fcomponents\u002Finput.md","Input 输入框",{"type":7,"value":1568,"toc":2913},[1569,1572,1584,1610,1613,1631,1686,1689,1703,1775,1778,1788,1843,1846,1873,1963,1966,1985,2075,2078,2086,2141,2143,2149,2180,2280,2307,2344,2347,2353,2414,2429,2505,2507,2813,2846,2884,2910],[10,1570,1566],{"id":1571},"input-输入框",[14,1573,1574,1575,1577,1578,1580,1581,1583],{},"输入框让用户输入单行或多行文本。样式与行为还原 WinUI 3（Windows App SDK）的 ",[18,1576,20],{}," 与 ",[18,1579,24],{},"：三行模板（标题 \u002F 控件 \u002F 说明）、抬升描边与底部高亮、密码显示按钮与 ",[27,1582,29],{}," 快捷键、掩码字符与密码显示模式都按源码逐条对照。",[14,1585,1586,1587,1591,1592,1597,1598,1600,1601,1606,1607,1609],{},"密码形态有两条掩码路径，取舍见下文",[35,1588,1590],{"href":1589},"#%E5%AF%86%E7%A0%81%E6%A1%86","密码框","：",[18,1593,1594,1595],{},"不传 ",[27,1596,45],{}," 走浏览器原生 ",[27,1599,49],{},"（保留密码管理器 \u002F 输入法 \u002F 读屏「密码框」语义，掩码字形由浏览器决定）；",[18,1602,1603,1604],{},"传 ",[27,1605,45],{}," 走「显示缓冲」掩码（字形精确，但输入框在掩码状态是 ",[27,1608,59],{},"，读屏与密码管理器不再识别它是密码框）。",[62,1611,1612],{"id":1612},"基础用法",[14,1614,1615,1617,1618,1620,1621,1620,1623,1625,1626,87,1628,1630],{},[27,1616,71],{}," 绑定字符串值；事件与原生属性（",[27,1619,75],{},"、",[27,1622,79],{},[27,1624,82],{},"……）直接透传到内部的 ",[27,1627,86],{},[27,1629,90],{},"。",[93,1632,1633,1637],{"title":1612},[96,1634,1635],{"v-slot:preview":98},[100,1636],{},[96,1638,1639],{"v-slot:code":98},[105,1640,1642],{"className":107,"code":1641,"language":109,"meta":98,"style":98},"\u003CFluereInput v-model=\"value\" placeholder=\"请输入内容\" \u002F>\n\u003CFluereInput placeholder=\"禁用状态\" disabled \u002F>\n",[27,1643,1644,1669],{"__ignoreMap":98},[113,1645,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1667],{"class":115,"line":116},[113,1647,120],{"class":119},[113,1649,124],{"class":123},[113,1651,128],{"class":127},[113,1653,131],{"class":119},[113,1655,135],{"class":134},[113,1657,138],{"class":119},[113,1659,135],{"class":134},[113,1661,143],{"class":127},[113,1663,131],{"class":119},[113,1665,1666],{"class":134},"\"请输入内容\"",[113,1668,151],{"class":119},[113,1670,1671,1673,1675,1677,1679,1682,1684],{"class":115,"line":154},[113,1672,120],{"class":119},[113,1674,124],{"class":123},[113,1676,143],{"class":127},[113,1678,131],{"class":119},[113,1680,1681],{"class":134},"\"禁用状态\"",[113,1683,168],{"class":127},[113,1685,151],{"class":119},[62,1687,1688],{"id":1688},"尺寸",[14,1690,1691,1693,1694,1696,1697,1699,1700,1702],{},[27,1692,179],{}," 取 ",[27,1695,183],{},"（24px）\u002F ",[27,1698,187],{},"（32px，默认）\u002F ",[27,1701,191],{},"（40px）。WinUI 的 TextBox 只有 32px 一档，尺寸档是本库扩展；标题与说明的字号随尺寸档一起走。",[93,1704,1705,1709],{"title":1688},[96,1706,1707],{"v-slot:preview":98},[198,1708],{},[96,1710,1711],{"v-slot:code":98},[105,1712,1713],{"className":107,"code":204,"language":109,"meta":98,"style":98},[27,1714,1715,1735,1755],{"__ignoreMap":98},[113,1716,1717,1719,1721,1723,1725,1727,1729,1731,1733],{"class":115,"line":116},[113,1718,120],{"class":119},[113,1720,124],{"class":123},[113,1722,215],{"class":127},[113,1724,131],{"class":119},[113,1726,220],{"class":134},[113,1728,143],{"class":127},[113,1730,131],{"class":119},[113,1732,227],{"class":134},[113,1734,151],{"class":119},[113,1736,1737,1739,1741,1743,1745,1747,1749,1751,1753],{"class":115,"line":154},[113,1738,120],{"class":119},[113,1740,124],{"class":123},[113,1742,215],{"class":127},[113,1744,131],{"class":119},[113,1746,242],{"class":134},[113,1748,143],{"class":127},[113,1750,131],{"class":119},[113,1752,249],{"class":134},[113,1754,151],{"class":119},[113,1756,1757,1759,1761,1763,1765,1767,1769,1771,1773],{"class":115,"line":254},[113,1758,120],{"class":119},[113,1760,124],{"class":123},[113,1762,215],{"class":127},[113,1764,131],{"class":119},[113,1766,265],{"class":134},[113,1768,143],{"class":127},[113,1770,131],{"class":119},[113,1772,272],{"class":134},[113,1774,151],{"class":119},[62,1776,1777],{"id":1777},"外观",[14,1779,1780,1693,1782,1784,1785,1787],{},[27,1781,277],{},[27,1783,285],{},"（默认，WinUI 的「抬升描边」：顶 \u002F 左 \u002F 右浅、底边重）或 ",[27,1786,289],{},"（只留底边，库扩展形态）。",[93,1789,1790,1794],{"title":1777},[96,1791,1792],{"v-slot:preview":98},[296,1793],{},[96,1795,1796],{"v-slot:code":98},[105,1797,1799],{"className":107,"code":1798,"language":109,"meta":98,"style":98},"\u003CFluereInput appearance=\"outline\" placeholder=\"Outline（默认）\" \u002F>\n\u003CFluereInput appearance=\"underline\" placeholder=\"Underline（下划线）\" \u002F>\n",[27,1800,1801,1822],{"__ignoreMap":98},[113,1802,1803,1805,1807,1809,1811,1813,1815,1817,1820],{"class":115,"line":116},[113,1804,120],{"class":119},[113,1806,124],{"class":123},[113,1808,313],{"class":127},[113,1810,131],{"class":119},[113,1812,318],{"class":134},[113,1814,143],{"class":127},[113,1816,131],{"class":119},[113,1818,1819],{"class":134},"\"Outline（默认）\"",[113,1821,151],{"class":119},[113,1823,1824,1826,1828,1830,1832,1834,1836,1838,1841],{"class":115,"line":154},[113,1825,120],{"class":119},[113,1827,124],{"class":123},[113,1829,313],{"class":127},[113,1831,131],{"class":119},[113,1833,340],{"class":134},[113,1835,143],{"class":127},[113,1837,131],{"class":119},[113,1839,1840],{"class":134},"\"Underline（下划线）\"",[113,1842,151],{"class":119},[62,1844,1845],{"id":1845},"标题与说明",[14,1847,1848,1850,1851,1853,1854,1856,1857,1859,1860,1862,1863,87,1865,1867,1868,87,1870,1872],{},[27,1849,358],{}," 渲染在控件上方（WinUI ",[27,1852,362],{},"，下外边距 8px），",[27,1855,366],{}," 渲染在控件下方（",[27,1858,370],{},"，前景取 ",[27,1861,374],{},"）。两者分别成为输入框的 ",[27,1864,378],{},[27,1866,82],{}," 来源，也可用同名插槽替换内容；消费方显式传入 ",[27,1869,384],{},[27,1871,82],{}," 时不覆盖。",[93,1874,1875,1879],{"title":1845},[96,1876,1877],{"v-slot:preview":98},[393,1878],{},[96,1880,1881],{"v-slot:code":98},[105,1882,1884],{"className":107,"code":1883,"language":109,"meta":98,"style":98},"\u003CFluereInput v-model=\"displayName\" header=\"显示名称\" description=\"将展示在个人资料页\" \u002F>\n\u003CFluereInput v-model=\"email\" type=\"email\" description=\"用于接收通知，不会公开\">\n  \u003Ctemplate #header>邮箱 \u003Cspan class=\"text-colorStatusDangerForeground1\">*\u003C\u002Fspan>\u003C\u002Ftemplate>\n\u003C\u002FFluereInput>\n",[27,1885,1886,1918,1950,1955],{"__ignoreMap":98},[113,1887,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1909,1911,1913,1916],{"class":115,"line":116},[113,1889,120],{"class":119},[113,1891,124],{"class":123},[113,1893,128],{"class":127},[113,1895,131],{"class":119},[113,1897,135],{"class":134},[113,1899,416],{"class":119},[113,1901,135],{"class":134},[113,1903,421],{"class":127},[113,1905,131],{"class":119},[113,1907,1908],{"class":134},"\"显示名称\"",[113,1910,429],{"class":127},[113,1912,131],{"class":119},[113,1914,1915],{"class":134},"\"将展示在个人资料页\"",[113,1917,151],{"class":119},[113,1919,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1941,1943,1945,1948],{"class":115,"line":154},[113,1921,120],{"class":119},[113,1923,124],{"class":123},[113,1925,128],{"class":127},[113,1927,131],{"class":119},[113,1929,135],{"class":134},[113,1931,455],{"class":119},[113,1933,135],{"class":134},[113,1935,757],{"class":127},[113,1937,131],{"class":119},[113,1939,1940],{"class":134},"\"email\"",[113,1942,429],{"class":127},[113,1944,131],{"class":119},[113,1946,1947],{"class":134},"\"用于接收通知，不会公开\"",[113,1949,486],{"class":119},[113,1951,1952],{"class":115,"line":254},[113,1953,1954],{"class":119},"  \u003Ctemplate #header>邮箱 \u003Cspan class=\"text-colorStatusDangerForeground1\">*\u003C\u002Fspan>\u003C\u002Ftemplate>\n",[113,1956,1957,1959,1961],{"class":115,"line":461},[113,1958,498],{"class":119},[113,1960,124],{"class":123},[113,1962,486],{"class":119},[62,1964,1965],{"id":1965},"多行文本",[14,1967,1968,1970,1971,516,1973,1975,1976,1978,1979,1981,1982,1984],{},[27,1969,511],{}," 对应 WinUI ",[27,1972,515],{},[27,1974,519],{},"，渲染 ",[27,1977,90],{},"：高度按 ",[27,1980,526],{},"（默认 3）展开，下限取尺寸高度（WinUI ",[27,1983,530],{}," 32），可拖动右下角调整高度。",[93,1986,1987,1991],{"title":1965},[96,1988,1989],{"v-slot:preview":98},[537,1990],{},[96,1992,1993],{"v-slot:code":98},[105,1994,1996],{"className":107,"code":1995,"language":109,"meta":98,"style":98},"\u003CFluereInput v-model=\"note\" multiline header=\"备注\" description=\"缺省 3 行\" \u002F>\n\u003CFluereInput v-model=\"feedback\" multiline :rows=\"6\" header=\"反馈\" \u002F>\n",[27,1997,1998,2033],{"__ignoreMap":98},[113,1999,2000,2002,2004,2006,2008,2010,2012,2014,2017,2019,2021,2024,2026,2028,2031],{"class":115,"line":116},[113,2001,120],{"class":119},[113,2003,124],{"class":123},[113,2005,128],{"class":127},[113,2007,131],{"class":119},[113,2009,135],{"class":134},[113,2011,562],{"class":119},[113,2013,135],{"class":134},[113,2015,2016],{"class":127}," multiline",[113,2018,421],{"class":127},[113,2020,131],{"class":119},[113,2022,2023],{"class":134},"\"备注\"",[113,2025,429],{"class":127},[113,2027,131],{"class":119},[113,2029,2030],{"class":134},"\"缺省 3 行\"",[113,2032,151],{"class":119},[113,2034,2035,2037,2039,2041,2043,2045,2048,2050,2052,2054,2056,2058,2060,2064,2066,2068,2070,2073],{"class":115,"line":154},[113,2036,120],{"class":119},[113,2038,124],{"class":123},[113,2040,128],{"class":127},[113,2042,131],{"class":119},[113,2044,135],{"class":134},[113,2046,2047],{"class":119},"feedback",[113,2049,135],{"class":134},[113,2051,2016],{"class":127},[113,2053,1089],{"class":119},[113,2055,526],{"class":127},[113,2057,131],{"class":119},[113,2059,135],{"class":134},[113,2061,2063],{"class":2062},"sj4cs","6",[113,2065,135],{"class":134},[113,2067,421],{"class":127},[113,2069,131],{"class":119},[113,2071,2072],{"class":134},"\"反馈\"",[113,2074,151],{"class":119},[62,2076,2077],{"id":2077},"错误状态",[14,2079,2080,2082,2083,2085],{},[27,2081,607],{}," 是本库扩展（WinUI TextBox 无内建错误态）：换成 status danger 描边并渲染 ",[27,2084,611],{},"，聚焦时底部高亮同样走 danger。",[93,2087,2088,2092],{"title":2077},[96,2089,2090],{"v-slot:preview":98},[618,2091],{},[96,2093,2094],{"v-slot:code":98},[105,2095,2097],{"className":107,"code":2096,"language":109,"meta":98,"style":98},"\u003CFluereInput invalid placeholder=\"错误输入\" aria-describedby=\"input-error-hint\" \u002F>\n\u003Cp id=\"input-error-hint\">请输入有效的内容。\u003C\u002Fp>\n",[27,2098,2099,2122],{"__ignoreMap":98},[113,2100,2101,2103,2105,2107,2109,2111,2114,2116,2118,2120],{"class":115,"line":116},[113,2102,120],{"class":119},[113,2104,124],{"class":123},[113,2106,635],{"class":127},[113,2108,143],{"class":127},[113,2110,131],{"class":119},[113,2112,2113],{"class":134},"\"错误输入\"",[113,2115,645],{"class":127},[113,2117,131],{"class":119},[113,2119,650],{"class":134},[113,2121,151],{"class":119},[113,2123,2124,2126,2128,2130,2132,2134,2137,2139],{"class":115,"line":154},[113,2125,120],{"class":119},[113,2127,14],{"class":123},[113,2129,661],{"class":127},[113,2131,131],{"class":119},[113,2133,650],{"class":134},[113,2135,2136],{"class":119},">请输入有效的内容。\u003C\u002F",[113,2138,14],{"class":123},[113,2140,486],{"class":119},[62,2142,1590],{"id":1590},[14,2144,2145,1970,2147,1591],{},[27,2146,49],{},[18,2148,24],{},[686,2150,2151,2167],{},[689,2152,2153,2157,2158,2160,2161,2163,2164,2166],{},[18,2154,1594,2155],{},[27,2156,45],{},"：原生 ",[27,2159,699],{},"。掩码字形由浏览器决定（Chrome \u002F Firefox 画 ",[27,2162,703],{},"，WinUI 是 ",[27,2165,707],{},"）—— 这是 Web 侧不可消除的差异，换来的是密码管理器、自动填充、输入法组合与读屏「密码框」角色全部照常工作。",[689,2168,2169,2173,2174,1591,2176,2179],{},[18,2170,1603,2171],{},[27,2172,45],{},"（多字符取首个码位）：走「显示缓冲」掩码，与 WinUI 把明文交给 RichEdit 密码模式同构 —— 输入框里放的是掩码串，真值只留在组件状态里，每次编辑按显示差异反推真值。字形精确到指定字符，代价是该状态下输入框是 ",[27,2175,59],{},[18,2177,2178],{},"读屏不再把它当密码框","、浏览器也不再提供密码保存 \u002F 填充。",[93,2181,2182,2186],{"title":1590},[96,2183,2184],{"v-slot:preview":98},[729,2185],{},[96,2187,2188],{"v-slot:code":98},[105,2189,2191],{"className":107,"code":2190,"language":109,"meta":98,"style":98},"\u003CFluereInput v-model=\"simple\" type=\"password\" placeholder=\"请输入密码\" \u002F>\n\u003CFluereInput\n  v-model=\"custom\"\n  type=\"password\"\n  header=\"密码\"\n  placeholder=\"请输入密码\"\n  password-char=\"#\"\n\u002F>\n",[27,2192,2193,2224,2230,2242,2250,2259,2268,2276],{"__ignoreMap":98},[113,2194,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2222],{"class":115,"line":116},[113,2196,120],{"class":119},[113,2198,124],{"class":123},[113,2200,128],{"class":127},[113,2202,131],{"class":119},[113,2204,135],{"class":134},[113,2206,752],{"class":119},[113,2208,135],{"class":134},[113,2210,757],{"class":127},[113,2212,131],{"class":119},[113,2214,762],{"class":134},[113,2216,143],{"class":127},[113,2218,131],{"class":119},[113,2220,2221],{"class":134},"\"请输入密码\"",[113,2223,151],{"class":119},[113,2225,2226,2228],{"class":115,"line":154},[113,2227,120],{"class":119},[113,2229,443],{"class":123},[113,2231,2232,2234,2236,2238,2240],{"class":115,"line":254},[113,2233,448],{"class":127},[113,2235,131],{"class":119},[113,2237,135],{"class":134},[113,2239,788],{"class":119},[113,2241,458],{"class":134},[113,2243,2244,2246,2248],{"class":115,"line":461},[113,2245,464],{"class":127},[113,2247,131],{"class":119},[113,2249,799],{"class":134},[113,2251,2252,2254,2256],{"class":115,"line":472},[113,2253,574],{"class":127},[113,2255,131],{"class":119},[113,2257,2258],{"class":134},"\"密码\"\n",[113,2260,2261,2263,2265],{"class":115,"line":483},[113,2262,813],{"class":127},[113,2264,131],{"class":119},[113,2266,2267],{"class":134},"\"请输入密码\"\n",[113,2269,2270,2272,2274],{"class":115,"line":489},[113,2271,823],{"class":127},[113,2273,131],{"class":119},[113,2275,828],{"class":134},[113,2277,2278],{"class":115,"line":495},[113,2279,593],{"class":119},[834,2281,2282],{},[14,2283,2284,2287,2288,87,2290,87,2292,2294,2295,2297,2298,2300,2301,2303,2304,2306],{},[18,2285,2286],{},"复制拦截（两条路径都生效）","：掩码状态下 ",[27,2289,844],{},[27,2291,847],{},[27,2293,850],{}," 一律被拦下（右键菜单的「复制」、选中后 ",[27,2296,854],{},"、拖拽文本都取不到内容），对应 WinUI 密码模式不提供剪贴板出口、以及文本控件的 ",[27,2299,858],{},"。显示明文（",[27,2302,862],{}," 按住期间或 ",[27,2305,866],{},"）时放行 —— 与「闭眼模式挡住复制」的口径一致。",[834,2308,2309],{},[14,2310,2311,2314,2315,2317,2318,2320,2321,2323,2324,2317,2326,2328,2329,2331,2332,2334,2335,2337,2338,2340,2341,2343],{},[18,2312,2313],{},"两条路径的浏览器实测差异","：原生路径（未传 ",[27,2316,45],{},"）的控件是 ",[27,2319,49],{},"，掩码字形是浏览器的 ",[27,2322,703],{},"；显示缓冲路径（传了 ",[27,2325,45],{},[27,2327,59],{},"，掩码字形就是指定字符（示例里的 ",[27,2330,892],{},"）。两条路径的编辑行为都已在真实浏览器里逐条核验：中间插入 \u002F 中间退格 \u002F 选中替换 \u002F 粘贴 \u002F ",[27,2333,896],{}," 撤销 \u002F ",[27,2336,900],{}," 重做 \u002F 全选删除后的真值都与输入一致（掩码字形相同，靠 ",[27,2339,904],{}," 的编辑区间 + ",[27,2342,908],{}," 反推，不靠字形比对）。",[62,2345,2346],{"id":2346},"显示密码",[14,2348,2349,1970,2351,1591],{},[27,2350,918],{},[27,2352,921],{},[923,2354,2355,2365],{},[926,2356,2357],{},[929,2358,2359,2362],{},[932,2360,2361],{},"取值",[932,2363,2364],{},"行为",[939,2366,2367,2391,2400],{},[929,2368,2369,2373],{},[944,2370,2371],{},[27,2372,948],{},[944,2374,2375,2378,2379,2382,2383,516,2385,2387,2388,2390],{},[18,2376,2377],{},"默认","。聚焦 + 本次聚焦期间「空 → 非空」+ 控件宽 > 5em 时，右侧出现「显示」按钮；",[18,2380,2381],{},"按住","期间显示明文、松开即遮蔽。键盘等价物是按住 ",[27,2384,961],{},[27,2386,964],{},"（松开 ",[27,2389,964],{}," 遮蔽）",[929,2392,2393,2397],{},[944,2394,2395],{},[27,2396,975],{},[944,2398,2399],{},"恒遮蔽，不出现按钮",[929,2401,2402,2406],{},[944,2403,2404],{},[27,2405,985],{},[944,2407,2408,2409,87,2411,2413],{},"恒显示明文，不出现按钮（官方样例即用 CheckBox 在 ",[27,2410,991],{},[27,2412,866],{}," 之间切换）",[14,2415,2416,2417,2419,2420,2422,2423,2425,2426,2428],{},"几条来自 WinUI 源码的细节（都有契约测试守着）：按钮 ",[27,2418,1000],{},"（",[27,2421,1004],{},"）不进 Tab 序列；获得焦点时按钮先隐藏，只有本次聚焦期间从空输入了内容才出现；控件宽度不足 5em 时按钮不出现（",[27,2424,1012],{}," 的 ",[27,2427,1008],{},"）。",[93,2430,2431,2435],{"title":2346},[96,2432,2433],{"v-slot:preview":98},[1019,2434],{},[96,2436,2437],{"v-slot:code":98},[105,2438,2440],{"className":107,"code":2439,"language":109,"meta":98,"style":98},"\u003CFluereInput\n  v-model=\"password\"\n  type=\"password\"\n  aria-label=\"示例密码框\"\n  :password-reveal-mode=\"showPassword ? 'visible' : 'hidden'\"\n\u002F>\n\u003CFluereCheckbox v-model=\"showPassword\">Show password\u003C\u002FFluereCheckbox>\n",[27,2441,2442,2448,2460,2468,2477,2497,2501],{"__ignoreMap":98},[113,2443,2444,2446],{"class":115,"line":116},[113,2445,120],{"class":119},[113,2447,443],{"class":123},[113,2449,2450,2452,2454,2456,2458],{"class":115,"line":154},[113,2451,448],{"class":127},[113,2453,131],{"class":119},[113,2455,135],{"class":134},[113,2457,1044],{"class":119},[113,2459,458],{"class":134},[113,2461,2462,2464,2466],{"class":115,"line":254},[113,2463,464],{"class":127},[113,2465,131],{"class":119},[113,2467,799],{"class":134},[113,2469,2470,2472,2474],{"class":115,"line":461},[113,2471,1059],{"class":127},[113,2473,131],{"class":119},[113,2475,2476],{"class":134},"\"示例密码框\"\n",[113,2478,2479,2481,2483,2485,2487,2489,2491,2493,2495],{"class":115,"line":472},[113,2480,1069],{"class":119},[113,2482,1072],{"class":127},[113,2484,131],{"class":119},[113,2486,135],{"class":134},[113,2488,1079],{"class":119},[113,2490,1083],{"class":1082},[113,2492,1086],{"class":134},[113,2494,1089],{"class":1082},[113,2496,1092],{"class":134},[113,2498,2499],{"class":115,"line":483},[113,2500,593],{"class":119},[113,2502,2503],{"class":115,"line":489},[113,2504,1101],{"class":119},[62,2506,1105],{"id":1104},[923,2508,2509,2524],{},[926,2510,2511],{},[929,2512,2513,2516,2519,2521],{},[932,2514,2515],{},"属性（Props）",[932,2517,2518],{},"类型",[932,2520,2377],{},[932,2522,2523],{},"说明",[939,2525,2526,2546,2563,2586,2603,2622,2644,2661,2681,2703,2727,2747,2769,2794],{},[929,2527,2528,2532,2536,2540],{},[944,2529,2530],{},[27,2531,1131],{},[944,2533,2534],{},[27,2535,1136],{},[944,2537,2538],{},[27,2539,1141],{},[944,2541,2542,2543,2545],{},"输入值（",[27,2544,71],{},"）",[929,2547,2548,2552,2556,2560],{},[944,2549,2550],{},[27,2551,179],{},[944,2553,2554],{},[27,2555,1157],{},[944,2557,2558],{},[27,2559,1162],{},[944,2561,2562],{},"尺寸，高度分别为 24 \u002F 32 \u002F 40 px（WinUI 默认 32）",[929,2564,2565,2569,2573,2577],{},[944,2566,2567],{},[27,2568,277],{},[944,2570,2571],{},[27,2572,1176],{},[944,2574,2575],{},[27,2576,1181],{},[944,2578,2579,2580,2582,2583,2585],{},"外观；",[27,2581,285],{}," 对齐 WinUI 的「抬升描边」，",[27,2584,289],{}," 为库扩展（只保留底边）",[929,2587,2588,2592,2596,2600],{},[944,2589,2590],{},[27,2591,1197],{},[944,2593,2594],{},[27,2595,1202],{},[944,2597,2598],{},[27,2599,1207],{},[944,2601,2602],{},"是否禁用",[929,2604,2605,2609,2613,2617],{},[944,2606,2607],{},[27,2608,607],{},[944,2610,2611],{},[27,2612,1202],{},[944,2614,2615],{},[27,2616,1207],{},[944,2618,2619,2620],{},"无效 \u002F 错误态；库扩展（WinUI TextBox 无内建错误态），同时渲染 ",[27,2621,611],{},[929,2623,2624,2628,2632,2636],{},[944,2625,2626],{},[27,2627,1236],{},[944,2629,2630],{},[27,2631,1241],{},[944,2633,2634],{},[27,2635,1246],{},[944,2637,2638,2639,2419,2641,2643],{},"原生 ",[27,2640,1236],{},[27,2642,511],{}," 为 true 时忽略）",[929,2645,2646,2650,2654,2658],{},[944,2647,2648],{},[27,2649,1262],{},[944,2651,2652],{},[27,2653,1136],{},[944,2655,2656],{},[27,2657,1141],{},[944,2659,2660],{},"占位符",[929,2662,2663,2667,2671,2675],{},[944,2664,2665],{},[27,2666,358],{},[944,2668,2669],{},[27,2670,1136],{},[944,2672,2673],{},[27,2674,1141],{},[944,2676,2677,2678,2680],{},"标题，渲染在控件上方（WinUI ",[27,2679,362],{},"）；同时作为可访问名来源",[929,2682,2683,2687,2691,2695],{},[944,2684,2685],{},[27,2686,366],{},[944,2688,2689],{},[27,2690,1136],{},[944,2692,2693],{},[27,2694,1141],{},[944,2696,2697,2698,2700,2701],{},"说明，渲染在控件下方（WinUI ",[27,2699,370],{},"），挂到 ",[27,2702,82],{},[929,2704,2705,2709,2713,2717],{},[944,2706,2707],{},[27,2708,511],{},[944,2710,2711],{},[27,2712,1202],{},[944,2714,2715],{},[27,2716,1207],{},[944,2718,2719,2720,516,2722,2724,2725],{},"多行形态（WinUI ",[27,2721,1335],{},[27,2723,1338],{},"），渲染 ",[27,2726,90],{},[929,2728,2729,2733,2737,2741],{},[944,2730,2731],{},[27,2732,526],{},[944,2734,2735],{},[27,2736,1352],{},[944,2738,2739],{},[27,2740,1357],{},[944,2742,2743,2744,2746],{},"多行行数（仅 ",[27,2745,511],{}," 生效）",[929,2748,2749,2753,2757,2761],{},[944,2750,2751],{},[27,2752,918],{},[944,2754,2755],{},[27,2756,1373],{},[944,2758,2759],{},[27,2760,948],{},[944,2762,2763,2764,2766,2767,2746],{},"密码显示模式（WinUI ",[27,2765,921],{},"，仅 ",[27,2768,49],{},[929,2770,2771,2775,2779,2783],{},[944,2772,2773],{},[27,2774,45],{},[944,2776,2777],{},[27,2778,1136],{},[944,2780,2781],{},[27,2782,1141],{},[944,2784,2785,2786,2788,2789,2791,2792,2545],{},"掩码字符（WinUI ",[27,2787,1405],{},"）；不传走原生 ",[27,2790,49],{},"，传值走显示缓冲掩码（见",[35,2793,1590],{"href":1589},[929,2795,2796,2800,2804,2808],{},[944,2797,2798],{},[27,2799,1418],{},[944,2801,2802],{},[27,2803,1136],{},[944,2805,2806],{},[27,2807,1427],{},[944,2809,2810,2811,2545],{},"「显示」按钮的无障碍名（对应 WinUI 本地化串 ",[27,2812,1433],{},[923,2814,2815,2824],{},[926,2816,2817],{},[929,2818,2819,2822],{},[932,2820,2821],{},"插槽（Slots）",[932,2823,2523],{},[939,2825,2826,2837],{},[929,2827,2828,2832],{},[944,2829,2830],{},[27,2831,358],{},[944,2833,2834,2835,2545],{},"替换标题内容（WinUI ",[27,2836,1458],{},[929,2838,2839,2843],{},[944,2840,2841],{},[27,2842,366],{},[944,2844,2845],{},"替换说明内容",[834,2847,2848],{},[14,2849,2850,1591,2853,87,2855,2857,2858,2860,2861,87,2863,87,2865,87,2867,87,2869,2871,2872,1620,2874,1620,2876,2878,2879,87,2881,2883],{},[18,2851,2852],{},"没有额外的 Events",[27,2854,1131],{},[27,2856,1479],{}," 由 ",[27,2859,71],{}," 提供；",[27,2862,12],{},[27,2864,1488],{},[27,2866,1491],{},[27,2868,1494],{},[27,2870,1497],{}," 等原生事件与 ",[27,2873,75],{},[27,2875,79],{},[27,2877,1505],{}," 等属性直接透传到内部的 ",[27,2880,86],{},[27,2882,90],{}," 上，按原生用法传即可。",[834,2885,2886],{},[14,2887,2888,2891,2892,2894,2895,2897,2898,2900,2901,2903,2904,2906,2907,2909],{},[18,2889,2890],{},"Web 侧的两处已知差异","（都写进了组件注释，不当作「已对齐实机」）：① 原生 ",[27,2893,49],{}," 的掩码字形由浏览器决定，无法指定 WinUI 的 ",[27,2896,707],{},"；要指定字形就得用显示缓冲路径（",[27,2899,45],{},"），代价是读屏 \u002F 密码管理器不再识别密码框。② 显式 ",[27,2902,45],{}," 时 WinUI 会在密码模式下禁掉输入法（",[27,2905,1534],{},"），Web 侧无法禁用输入法，只能在 IME 组合期间用 ",[27,2908,1538],{}," 兜住明文、组合结束后再收敛成掩码串。",[1541,2911,2912],{},"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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":98,"searchDepth":154,"depth":154,"links":2914},[2915,2916,2917,2918,2919,2920,2921,2922,2923],{"id":1612,"depth":154,"text":1612},{"id":1688,"depth":154,"text":1688},{"id":1777,"depth":154,"text":1777},{"id":1845,"depth":154,"text":1845},{"id":1965,"depth":154,"text":1965},{"id":2077,"depth":154,"text":2077},{"id":1590,"depth":154,"text":1590},{"id":2346,"depth":154,"text":2346},{"id":1104,"depth":154,"text":1105},"输入框组件，用于获取用户文本输入，支持标题 \u002F 说明、多行与密码形态。",{},{"title":1566},"\u002Fcomponents\u002Finput",{"title":1566,"description":2924},"components\u002Finput","_o4gdor6197HwGZnHx0lGgJ32gZFaoIDdBsJNOrkBmc",1792150929034]