Number field

<k-number-field>

kirby/panel/src/components/Forms/Field/NumberField.vue

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