Number field
<k-number-field>
This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.
Have a look at <k-field>, <k-input> and <k-number-input> for additional information.
<k-number-field v-model="number" name="number" label="Number" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| after |
string |
– |
|
| autofocus |
boolean |
– |
|
| before |
string |
– |
|
| counter |
boolean|object |
– |
|
| disabled |
boolean |
– |
|
| endpoints |
object |
– |
|
| help |
string |
– |
|
| icon |
string|boolean |
– |
|
| id |
number|string |
function() { return this._uid; } |
|
| input |
string|number |
– |
|
| invalid |
boolean |
– |
|
| label |
string |
– |
|
| max |
number |
– |
|
| min |
number |
– |
|
| name |
number|string |
– |
|
| novalidate |
boolean |
false |
|
| placeholder |
string |
– |
|
| preselect |
boolean |
– |
|
| required |
boolean |
– |
|
| step |
number |
– |
The amount to increment with each input step. This can be a decimal.
|
| theme |
string |
– |
|
| translate |
boolean |
– |
|
| type |
string |
– |
|
| value |
number|string |
null |
|
Events
| Event | Description | Passes |
|---|---|---|
| blur |
|
– |
| focus |
|
– |
Slots
| Slot | Description |
|---|---|
| after | |
| before | |
| counter | |
| default | |
| footer | |
| header | |
| help | |
| icon | |
| label | |
| options |
Example
<k-number-field
v-model="value"
:max="10000"
:min="1000"
:step="100"
:required="true"
before="$"
after="budget"
label="Number"
help="This is a number field"
@input="input"
/>CSS classes
.k-number-field