KInput
Input data using keyboard.
Install
pnpm add @ikun-ui/input
yarn add @ikun-ui/input
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
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 |