Input

The input allows users to enter single-line or multi-line text. Its styling and behavior reproduce the WinUI 3 (Windows App SDK) TextBox and PasswordBox: the three-line template (header / control / description), the elevated stroke with bottom highlight, the password reveal button with the Alt+F8 shortcut, and the mask character and password reveal modes are all checked against the source line by line.

The password form has two mask paths, and the trade-off is described in Password Box: without passwordChar it uses the native browser type="password" (keeping the "password field" semantics for password managers / IMEs / screen readers, with the mask glyph determined by the browser); with passwordChar it uses a "display buffer" mask (glyph-accurate, but the field is type="text" in masked state, so screen readers and password managers no longer recognize it as a password field).

Basic usage

Bind a string value with v-model; events and native attributes (autocomplete, maxlength, aria-describedby…) pass through directly to the internal <input> / <textarea>.

<FluereInput v-model="value" placeholder="Enter text" />
<FluereInput placeholder="Disabled" disabled />

Sizes

size takes small (24px) / medium (32px, default) / 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.

<FluereInput size="small" placeholder="Small (24px)" />
<FluereInput size="medium" placeholder="Medium (32px)" />
<FluereInput size="large" placeholder="Large (40px)" />

Appearance

appearance takes outline (default, WinUI's "elevated stroke": light on top / left / right and heavy on the bottom edge) or underline (only the bottom edge remains; a library extension).

<FluereInput appearance="outline" placeholder="Outline (default)" />
<FluereInput appearance="underline" placeholder="Underline" />

Header and description

header renders above the control (WinUI TextBox.Header, with an 8px bottom margin), and description renders below the control (TextBox.Description, with the foreground taken from TextFillColorSecondary). They respectively become the source of the input's aria-labelledby / aria-describedby, and can also be replaced with same-named slots; when consumers explicitly pass aria-label / aria-describedby, they are not overridden.

<FluereInput v-model="displayName" header="Display name" description="Shown on your profile page" />
<FluereInput
  v-model="email"
  type="email"
  description="Used for notifications; never shown publicly"
>
  <template #header>Email <span class="text-colorStatusDangerForeground1">*</span></template>
</FluereInput>

Multiline text

multiline corresponds to WinUI TextBox.AcceptsReturn = true + TextWrapping = Wrap and renders a <textarea>: its height expands by rows (default 3), with the lower bound being the size tier height (WinUI MinHeight 32), and the bottom-right corner can be dragged to adjust the height.

<FluereInput
  v-model="note"
  multiline
  header="Notes"
  description="3 rows by default; drag the bottom-right corner to resize"
/>
<FluereInput v-model="feedback" multiline :rows="6" header="Feedback" />

Error state

invalid is a library extension (the WinUI TextBox has no built-in error state): it switches to the status-danger stroke and renders aria-invalid, and the bottom highlight also uses danger when focused.

<FluereInput invalid placeholder="Invalid input" aria-describedby="input-error-hint" />
<p id="input-error-hint">Please enter a valid value.</p>

Password box

type="password" corresponds to the WinUI PasswordBox:

• Without passwordChar: native <input type="password">. The mask glyph is determined by the browser (Chrome / Firefox draw •, while WinUI uses ●) — 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.
• With passwordChar (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 type="text" in that state: screen readers no longer treat it as a password field, and the browser no longer offers password saving / filling.

<FluereInput v-model="simple" type="password" placeholder="Enter password" />
<FluereInput
  v-model="custom"
  type="password"
  header="Password"
  placeholder="Enter password"
  password-char="#"
/>

Copy interception (applies to both paths): in the masked state copy / cut / dragstart are all intercepted (the "Copy" entry in the context menu, 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 TXTBIT_DISABLEDDRAG. When the plaintext is shown (peek while held, or visible) copying is allowed — consistent with the "the eye-closed mode blocks copying" behavior.

Browser-measured differences between the two paths: the native path (no passwordChar) is a type="password" control whose mask glyph is the browser's •; the display-buffer path (with passwordChar) is a type="text" control whose mask glyph is the specified character (the # in the example). The editing behavior of both paths has been verified item by item in a real browser: insert in the middle / backspace in the middle / replace selection / paste / Ctrl+Z undo / Ctrl+Shift+Z redo / the true value after select-all-and-delete all match the input (given the same mask glyph, the true value is inferred from the beforeinput edit range + inputType, not from glyph comparison).

Reveal password

passwordRevealMode corresponds to WinUI PasswordBox.PasswordRevealMode:

A few details from the WinUI source (all guarded by contract tests): the button has tabindex="-1" (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 Minimum width … is 5em in ArrangeOverride).

<FluereInput
  v-model="password"
  type="password"
  aria-label="Example password field"
  :password-reveal-mode="showPassword ? 'visible' : 'hidden'"
/>
<FluereCheckbox v-model="showPassword">Show password</FluereCheckbox>

API

No extra Events: modelValue / update:modelValue are provided by v-model; native events such as input / change / focus / blur / keydown and attributes such as autocomplete, maxlength, aria-* fall through directly to the internal <input> / <textarea>, so they can be passed as with a native field.

Two known Web-side differences (both written into the component comments, not claimed as "aligned with real hardware"): ① with native type="password" the mask glyph is determined by the browser and WinUI's ● cannot be specified; to specify a glyph you must use the display-buffer path (passwordChar), at the cost that screen readers / password managers no longer recognize the password field. ② With an explicit passwordChar, WinUI disables the IME in password mode (InputScope = IS_PASSWORD); the Web cannot disable the IME, so during IME composition -webkit-text-security is used to mask the plaintext, and the content is converged back into the masked string once composition ends.