Input | Tuff Docs

Usage

Loading demo...

Loading demo...

type takes text, password, textarea, date, email, or number; rows sets the textarea height.

Loading demo...

Loading demo...

clearable shows a focusable clear button while there is a value; it hides when disabled or readonly.

Loading demo...

The prefix / suffix slots take precedence over prefixIcon / suffixIcon.

Loading demo...

Show focus only through the subtle border and shadow shift; don't add a second focus ring around the wrapper unless the surrounding form requires one.
Keep search states light for toolbars and list filters; use TxSearchInput when Enter search or debounced remote search is part of the contract.
With type="number" the value is a number or ''; normalize it in your schema before persisting.
Give each field's icons one path: the slot or the icon prop.

Property	Type	Default	Description
modelValue / v-model			The input value.
placeholder			Placeholder text.
type			Input type; `textarea` renders a multiline field.
disabled			Disables input.
readonly			Makes the field read-only.
clearable			Shows a clear button while there is a value.
rows			Textarea rows; `textarea` only.
prefixIcon			Prefix icon class; the `prefix` slot wins.
suffixIcon			Suffix icon class; the `suffix` slot wins.
capsLockText			Text of the CapsLock warning on password fields, announced via `role="status"`.

Property	Default	Description
update:modelValue	-	Fires when the value changes.
input	-	Fires on input, with the same value as `update:modelValue`.
focus	-	Fires when the native control gains focus.
blur	-	Fires when the native control loses focus.
clear	-	Fires after a clear.

Property	Type	Default	Description
prefix	-	-	Prefix content, replacing `prefixIcon`.
suffix	-	-	Suffix content, replacing `suffixIcon`.

Property	Default	Description
focus	-	Focuses the native control.
blur	-	Blurs the native control.
clear	-	Clears the value; no-op when disabled or readonly.
setValue	-	Sets the value and emits `update:modelValue` and `input`.
getValue	-	Returns the current value.
inputEl	-	Ref to the native input or textarea.

FlatInput / TxFlatInput is retired; TxInput covers it:

FlatInput	TxInput
`area`	`type="textarea"`
`password`	`type="password"`
`icon="i-…"`	`prefix-icon="i-…"`
default slot (prefix content)	`#prefix` slot
`disabled` / `readonly`	`disabled` / `readonly`
`nonWin`	dropped; the Windows-underline visual is gone

update:modelValue keeps its contract; focus / blur now come from the native input element.

type="number" emits Number(value) for non-empty input and '' when cleared.
Clearing emits update:modelValue, input, then clear; it is a no-op when disabled or readonly.
class / style stay on the wrapper; all other attrs go to the native input / textarea.

packages/tuffex/packages/components/src/input/index.ts