3.0 KiB
Input
Demos
Size variants
Available size variants for the ui
prop: xs
/s
/m
/l
.
Read-only state
Use the readonly
prop to set an input to read-only state.
Disabled state
Use the disabled
prop to set an input to disabled state.
API
Props
Name | Type | Default | Description |
---|---|---|---|
ui |
string= |
- | [^ui] |
value |
string |
'' | [^value] |
disabled |
boolean= |
false |
Whether the input is disabled. |
readonly |
boolean= |
false |
Whether the input is read-only. |
type |
string= |
'text' |
[^type] |
placeholder |
string= |
- | The placeholder text of the input. |
clearable |
boolean= |
false |
Whether to show a clear button. |
composition |
boolean= |
false |
Whether the input process should be aware of composition. |
select-on-focus |
boolean= |
false |
Whether to select text content when focused. |
^^^ui Style variants.
+++Enum values
Value | Description |
---|---|
xs |
Extra small. |
s |
Small. |
m |
Medium. |
l |
Large. |
+++ | |
^^^ |
^^^value
:::badges
v-model
:::
The value of the input. ^^^
^^^type
The type of the input. See the type
attribute of HTML's native <input>
element.
+++Enum
Value | Description |
---|---|
text |
Plain text input. |
password |
Password input. |
hidden |
Hidden input but holds a value to submit. |
+++ | |
^^^ |
Slots
Name | Description |
---|---|
before |
The content before the input area inside the component. |
after |
The content after the input area inside the component. |
:::warning Slots will squeeze the width of the input area. :::
Events
Name | Description |
---|---|
change |
[^event-change] |
input |
[^event-input] |
^^^event-change
Triggered when the input value is changed like the native change
event. The callback parameter list is (value, event)
.
+++Parameters
Name | Type | Description |
---|---|---|
value |
string |
The value of the input. |
event |
Event |
Native change event object. |
+++ | ||
^^^ |
^^^event-input
:::badges
v-model
:::
Triggered when inputting into the input. Affected by the composition
prop. The callback parameter list is (value: string)
, where value
is the current value of the input.
^^^
Additionally, Input
exposes the following native events:
auxclick
, click
, contextmenu
, dblclick
, mousedown
, mouseenter
, mouseleave
, mousemove
, mouseover
, mouseout
, mouseup
, select
, wheel
, keydown
, keypress
, keyup
, focus
, blur
, focusin
, focusout
.
The callback parameter is the corresponding native event object for all events above.
Icons
Name | Description |
---|---|
remove |
Remove button. |