KInput

Input data using keyboard.

Install

pnpm

pnpm add @ikun-ui/input

yarn

yarn add @ikun-ui/input

npm

npm install @ikun-ui/input

Basic usage

Prefix icon and suffix icon input

Set the prefix through the icon attribute

Disabled input

Disable the input through the disabled attribute

disabled input

Clearable

Make the Input clearable with the clearable attribute.

clearable input

Password input

Enable the password input box and pass the type as password.

password input

Prepend and append input

Use the append or prepend attribute to enable a button

Search input

Quickly implement a search box

TIP

When search is true and you press enter or click the prepend button or click the append button, the event will be triggered. In this case, the triggerPrepend event, triggerPrepend event and enter event will not be triggered.

Sizes

Add size attribute to change the size of Input. It supports sm, md and lg.

Textarea

Setting the autosize prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to autosize to specify the minimum and maximum number of lines the textarea can automatically adjust.

Input Props

Name	Type	Default	Description
size	sm | md |lg	md	size of Input.
type	text | password	text	Determine whether it is a password input
value	string	-	Binding value
iconPrefix	string	-	The class name of the prefix icon, following the unocss standard
iconSuffix	string	-	The class name of the suffix icon, following the unocss standard
append	string	-	The class name of the append button icon, following the unocss standard
prepend	string	-	The class name of the prepend button icon, following the unocss standard
placeholder	string	false	Input's placeholder
disabled	boolean	false	Disable the Input
clearable	boolean	false	whether to show clear button, only works when type is not 'textarea'
search	boolean	false	Enable search callback
useCompositionInput	boolean	false	Bind value will be updated after the composition input ends
rows	number	3	number of rows of textarea, only works when type is 'textarea'
autosize	boolean | { minRows: number: maxRows:number }	false	whether textarea has an adaptive height, only works when type is 'textarea'.
cls	string	-	Additional class
attrs	Record<string, string>	{}	Additional attributes

Input Events

Name	Description	Type
input	Event fired on input	(value: string)=> void
enter	Event fired when enter is pressed	(e: Event)=> void
keydown	Event fired when keyboard is pressed	(e: Event)=> void
change	Event fired when the value is changes	(e: Event)=> void
compositionstart	The compositionstart event is fired when a text composition system	(e: CompositionEvent)=> void
compositionend	The compositionend event is fired when a text composition system	(e: CompositionEvent)=> void
compositionInput	Event fired when enable useCompositionInput	(e: CompositionEvent)=> void
triggerPrepend	Event fired on prepend button	(value: HTMLInputElement.value)=> void
triggerAppend	Event fired on append button	(value: HTMLInputElement.value)=> void
search	When search is true and you press enter or click the prepend button or click the append button, the event will be triggered.	(value: HTMLInputElement.value)=> void

Input Slots

Name	Description
prefix	Customize input prefix content
suffix	Customize input suffix content
append	Customize input append content
prepend	Customize input prepend content