Skip to content

KInput

Input data using keyboard.

Install

bash
pnpm add @ikun-ui/input
bash
yarn add @ikun-ui/input
bash
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

Clearable

Make the Input clearable with the clearable attribute.

Password input

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

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

NameTypeDefaultDescription
sizesm | md |lgmdsize of Input.
typetext | passwordtextDetermine whether it is a password input
valuestring-Binding value
iconPrefixstring-The class name of the prefix icon, following the unocss standard
iconSuffixstring-The class name of the suffix icon, following the unocss standard
appendstring-The class name of the append button icon, following the unocss standard
prependstring-The class name of the prepend button icon, following the unocss standard
placeholderstringfalseInput's placeholder
disabledbooleanfalseDisable the Input
clearablebooleanfalsewhether to show clear button, only works when type is not 'textarea'
searchbooleanfalseEnable search callback
useCompositionInputbooleanfalseBind value will be updated after the composition input ends
rowsnumber3number of rows of textarea, only works when type is 'textarea'
autosizeboolean | { minRows: number: maxRows:number }falsewhether textarea has an adaptive height, only works when type is 'textarea'.
clsstring-Additional class
attrsRecord<string, string>{}Additional attributes

Input Events

NameDescriptionType
inputEvent fired on input(value: string)=> void
enterEvent fired when enter is pressed(e: Event)=> void
keydownEvent fired when keyboard is pressed(e: Event)=> void
changeEvent fired when the value is changes(e: Event)=> void
compositionstartThe compositionstart event is fired when a text composition system(e: CompositionEvent)=> void
compositionendThe compositionend event is fired when a text composition system(e: CompositionEvent)=> void
compositionInputEvent fired when enable useCompositionInput(e: CompositionEvent)=> void
triggerPrependEvent fired on prepend button(value: HTMLInputElement.value)=> void
triggerAppendEvent fired on append button(value: HTMLInputElement.value)=> void
searchWhen 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

NameDescription
prefixCustomize input prefix content
suffixCustomize input suffix content
appendCustomize input append content
prependCustomize input prepend content

MIT Licensed