element | HTMLElement | — | bind:element={element} | Reference to the outer Frame root, available through bind:element. It is not a native input reference. |
gap | number | — | gap={42} | Inherited Frame gap token index. Omit it to retain the original preferred gap. Explicit values override the preference; effective graphics/text spacing remains at least 4 CSS px, including zero, root font scaling and gap scaling. |
type | HTMLInputAttributes["type"] | "text" | type="email" | One-line input type. Supports text, search, email, password, url, tel, number, date, time, datetime-local, month, week, and color. Date, time, and color have a component display layer backed by a native value host. file and range fall back to text; they do not provide upload or slider behavior. |
value | InputValue | — | bind:value={siteName} | Current value; supports two-way bind:value. An explicit value takes priority over defaultValue. Native editing and the built-in clear action synchronize the input.value string. number accepts a numeric initial value, but application calculations must convert the edited string. |
defaultValue | InputValue | — | defaultValue="SnowUI Workshop" | Initial value when value is not provided. The component manages later edits. To restore a business initial value on form reset, explicitly restore the binding in onreset. |
placeholder | string | — | placeholder="Search documentation" | Hint shown for an empty input, not a replacement for an accessible label. Date and time inputs keep segmented placeholders. |
name | string | — | name="siteName" | Native form field name used by FormData to collect the value. |
disabled | boolean | false | disabled | Prevent user editing and interaction. Native disabled fields are omitted from form submission. |
readonly | boolean | false | readonly | Prevent editing while retaining focus, selection, and form submission. Hides the clear control. Custom trailing content remains after focus and uses read-only visuals. |
clearable | boolean | true | clearable | Whether the built-in clear X can be shown. false omits it without changing editing, validation, or custom trailing content. Works for standalone Input and Input inside Field. |
required | boolean | false | required | Participate in native browser required validation. Does not generate business error copy. |
autocomplete | HTMLInputAttributes["autocomplete"] | — | autocomplete="username" | Browser autofill field meaning, such as username, email, or new-password. Suggestions come from browser-saved data. |
minlength | number | — | minlength={3} | Minimum character length for applicable text inputs, enforced by the browser during relevant user edits and form validation. |
maxlength | number | — | maxlength={24} | Maximum character length for applicable text inputs. In a floating as="search" layer, defaults to 100 when not explicitly set. |
pattern | string | — | pattern="[a-z0-9-]+" | Native validation regular expression for applicable text inputs, without surrounding slashes. It must match the whole value; required determines whether empty input is valid. |
min | number | string | — | min={5} | Minimum value for number or date/time inputs, expressed as a number or in the native date/time format respectively. |
max | number | string | — | max={100} | Maximum value for number or date/time inputs, expressed as a number or in the native date/time format respectively. |
step | number | string | — | step={5} | Native step constraint. number uses numeric units; date/time types use their browser-defined units. |
inputmode | HTMLInputAttributes["inputmode"] | — | inputmode="numeric" | Soft-keyboard hint, such as numeric, decimal, or tel. It does not filter or validate input. |
enterkeyhint | HTMLInputAttributes["enterkeyhint"] | — | enterkeyhint="next" | Soft-keyboard Enter action hint, such as next, search, or done. It does not navigate or submit automatically. |
spellcheck | boolean | — | spellcheck={false} | Browser spellcheck switch. When omitted, browser and inherited settings apply. |
list | string | — | list="snowui-sections" | id of a native datalist. The caller provides candidates and the browser renders them. |
accept | string | — | accept="image/*" | Preserved native attribute pass-through. Input does not support file, so this cannot provide file-type restrictions or upload behavior. |
multiple | boolean | — | multiple | Native multiple-value hint, such as multiple email addresses where the browser supports them. Input does not support multiple file uploads. |
capture | boolean | "user" | "environment" | — | capture="environment" | Preserved native capture attribute. Because file falls back to text, it does not provide camera or file capture in Input. |
form | string | — | form="site-settings" | Associate an external form by id. Native submission and reset include this field even when it is outside the form element. |
autofocus | boolean | — | autofocus | Native autofocus hint for ordinary inputs; the browser may keep an existing focus. Date/time display layers focus the first segment when first mounted. Avoid stealing focus on page load. |
tabindex | number | — | tabindex={0} | Native focus order. 0 follows natural order, -1 removes sequential focus, and positive numbers set an explicit order. Natural order is recommended for ordinary forms. |
title | string | — | title="Public contributor name" | Native hint text. Also supplies the display layer for date/time and color inputs; it is not a replacement for a label. |
id | string | — | id="site-account" | Native input identifier for label for and other native associations. |
invalid | boolean | false | invalid | Combine with aria-invalid for invalid visual state. Standalone Input shows its own error feedback; Field owns the summary when Input is embedded. |
error | string | Snippet | — | error="Use a scoped, lowercase package name." | Generate a built-in error Text below the input when invalid. A string provides copy; a parameterless Snippet provides custom content. None is generated by default. |
parts | ComponentPartsOf<{ Text: typeof Text; Button: typeof Button }> | — | parts={{ Text: { "aria-live": "polite" } }} | Configure public Props of generated error Text or action Button by key. Applies only to generated Text; explicit children set their own Props. |
onclick | (event: MouseEvent) => void | — | onclick={(event) => log(event)} | Called on click on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
ondblclick | (event: MouseEvent) => void | — | ondblclick={(event) => log(event)} | Called on double-click on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
oninput | (event: Event) => void | — | oninput={(event) => log(event)} | Called when user input or a built-in clear or step action synchronizes the value on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onchange | (event: Event) => void | — | onchange={(event) => log(event)} | Called when the native submitted value changes or the component synchronizes a change on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onfocus | (event: FocusEvent) => void | — | onfocus={(event) => log(event)} | Called on focus on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onblur | (event: FocusEvent) => void | — | onblur={(event) => log(event)} | Called on blur on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onkeydown | (event: KeyboardEvent) => void | — | onkeydown={(event) => log(event)} | Called on keydown on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onkeyup | (event: KeyboardEvent) => void | — | onkeyup={(event) => log(event)} | Called on keyup on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onkeypress | (event: KeyboardEvent) => void | — | onkeypress={(event) => log(event)} | Called on the deprecated keypress event; prefer onkeydown in new code on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
onpaste | (event: ClipboardEvent) => void | — | onpaste={(event) => log(event)} | Called on paste on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
oncopy | (event: ClipboardEvent) => void | — | oncopy={(event) => log(event)} | Called on copy on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
oncut | (event: ClipboardEvent) => void | — | oncut={(event) => log(event)} | Called on cut on the native input or its display layer. Receives the corresponding event and returns no value. Use event.preventDefault() to cancel a cancelable browser default action; the callback cannot undo a component value update that has already run. |
children | Snippet | — | <Input placeholder="Search"><Icon as="leading"><MagnifyingGlass /></Icon></Input> | Explicit content snippet with no parameters. Compose leading or trailing icons and attachments with as="leading" or as="trailing". The visible clear control takes over the trailing position. |
allowCustomValue | boolean | false | allowCustomValue | Only applies when as="search" is inside Listbox. When there is no match, Enter adds and selects the input as a custom item. Custom items can also be removed. |
