Input

Input content via mouse or keyboard, the most basic form field wrapper.

Basic Usage

Basic Usage

Disabled State

Disabled State

Clearable

Clearable

Password Box

Password Box

Input with Icons

🔍

📅

Input with Icons

Textarea

Textarea

Autosize Textarea

Autosize

Composite Input

Add an element before or after the input field, typically a label or a button.

Http://

.com

1

1

Composite Input

Input Length Limit

0 / 10

0 / 100

Word Limit

Different Sizes

Different Sizes

Formatted Input

Actual internal value:

Formatted

Visual Variants

Use the variant prop to switch between four visual styles: default (with border), filled (filled background), borderless (no border), underlined (bottom line only).

Visual Variants

Loading State

Set loading to true to show a spinning loading icon in the suffix area. Commonly used for async username checks, real-time search, etc.

Loading State

Independent Status Color

Use status to apply success, warning, or error border colors without relying on a Form/FormItem wrapper.

Independent Status

Select On Focus

With select-on-focus, clicking or Tab-keying into the input will auto-select all text inside. Perfect for numeric editing or table cell editing.

Select On Focus

Clear On Escape

With clear-on-escape, pressing Esc immediately clears the input content. Works best combined with clearable.

Clear On Escape

Prefix/Suffix String & Native Datalist

The prefix/suffix props accept plain strings (e.g. currency symbols, units) without needing slots. The list prop binds a native <datalist> id for local autocomplete suggestions.

$USD

Prefix/Suffix String & Datalist

Custom Word Count

Use count-config's calculate function to define custom length calculation logic, e.g. CJK characters count as 2 bytes.

0 / 20

Custom Word Count

Use in Nuxt

Input fully supports Nuxt 3/4 SSR rendering. When used in a Nuxt project, the component is automatically imported.

Use in Nuxt

SSR Notes:

• ✅ Basic input and textarea modes are fully supported.
• ✅ Style and layout are consistent between server and browser.
• ✅ Dynamic ID generation is SSR-safe (based on useId).
• ⚠️ autofocus attribute only takes effect after client-side activation.

SSR Safety

The Input component is optimized for SSR, especially its ID generation mechanism, ensuring consistency between server rendering and client activation, effectively avoiding attribute mismatch errors.

API

Props

Prop	Description	Type	Default
model-value / v-model	Binding value	string | number	—
type	Type	'text' | 'password' | 'textarea' | 'number' | 'email' | 'url' | 'tel' | 'search'	'text'
size	Input size	'large' | 'default' | 'small'	'default'
placeholder	Placeholder text	string	—
variant	Visual variant style	'default' | 'filled' | 'borderless' | 'underlined'	'default'
status	Independent status color, without relying on FormItem	'' | 'success' | 'warning' | 'error'	''
loading	Whether to show loading state	boolean	false
disabled	Whether to disable	boolean	false
readonly	Whether to set read-only	boolean	false
clearable	Whether it is clearable	boolean	false
clear-on-escape	Whether pressing Esc clears the input	boolean	false
select-on-focus	Whether to auto-select all text on focus	boolean	false
show-password	Whether to show password toggle icon	boolean	false
show-word-limit	Whether to show word count	boolean	false
count-config	Custom word count configuration	{ calculate?: (value: string) => number }	—
maxlength	Maximum input length	number | string	—
minlength	Minimum input length	number | string	—
prefix-icon	Prefix icon	string | Component	—
suffix-icon	Suffix icon	string | Component	—
clear-icon	Clear icon	string | Component	—
prefix	Prefix text string (shortcut for #prefix slot)	string	—
suffix	Suffix text string (shortcut for #suffix slot)	string	—
list	Native list attribute, binds a datalist element id	string	—
autofocus	Autofocus on mounting	boolean	false
autocomplete	Native autocomplete attribute	string	'off'
name	Native name attribute	string	—
form	Native form attribute	string	—
id	Input ID	string	—
aria-label	Native aria-label attribute	string	—
tabindex	Input tabindex	string | number	—
validate-event	Whether to trigger form validation on input	boolean	true
input-style	Input inline style	string | object	—
label	(Deprecated) Native aria-label attribute, suggest use aria-label	string	—
inputmode	Native inputmode attribute	string	—
model-modifiers	v-model modifiers	object	—
formatter	Format function (for display)	(value: string | number) => string	—
parser	Parse function (for updating value)	(value: string) => string	—
rows	Textarea rows (effective for type="textarea")	number	2
autosize	Autosize height (effective for type="textarea")	boolean | { minRows?: number; maxRows?: number }	false
resize	Whether to allow resizing (effective for type="textarea")	'none' | 'both' | 'horizontal' | 'vertical'	—

Events

Event Name	Description	Callback Parameters
update:modelValue	Triggered when binding value updates	(value: string) => void
input	Triggered when input value changes	(value: string) => void
change	Triggered on blur or Enter press	(value: string) => void
focus	Triggered on focus	(event: FocusEvent) => void
blur	Triggered on blur	(event: FocusEvent) => void
clear	Triggered on clicking clear button	() => void
keydown	Triggered on key down	(event: KeyboardEvent) => void
keyup	Triggered on key up	(event: KeyboardEvent) => void
compositionstart	Triggered when IME starts input	(event: CompositionEvent) => void
compositionupdate	Triggered during IME input	(event: CompositionEvent) => void
compositionend	Triggered when IME starts finishes	(event: CompositionEvent) => void

Slots

Slot Name	Description
prefix	Header content of input
suffix	Footer content of input
prepend	Prepend content (composite input)
append	Append content (composite input)
clearIcon	Custom clear icon
loadingIcon	Custom loading icon

Expose

Name	Description	Type
ref	Input DOM element	HTMLInputElement | HTMLTextAreaElement | undefined
wrapperRef	Wrapper element DOM	HTMLElement | undefined
focus	Focus the input	() => void
blur	Blur the input	() => void
select	Select text in input	() => void
clear	Clear input content	() => void
textLength	Current display length (result from countConfig if provided)	number

Theme Variables

The Input component uses the following CSS variables for customization:

Variable	Description	Default
--yh-input-height	Input height	var(--yh-component-size-default)
--yh-input-font-size	Font size	var(--yh-font-size-base)
--yh-input-padding	Input padding	0 var(--yh-spacing-md)
--yh-input-border-color	Border color	var(--yh-border-color)
--yh-input-hover-border-color	Hover border color	var(--yh-border-color-hover)
--yh-input-focus-border-color	Focus border color	var(--yh-color-primary)
--yh-input-bg-color	Background color	var(--yh-fill-color-blank)