Vuersatile Components

Appearance

On this page

InputNumber ​

Not so plain and not so simple input number.

Implements mixins ValidationsInputMixin and BasicInputMixin.

html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputNumber
                    name="age"
                    label="Age"
                    placeholder="You must be over 18..."
                    icon="calendar-days"
                    :validations="['not-empty', { name: 'min-value', params: [18] }]"
                />
            </div>
        </div>
    </Form>
</Card>

Props ​

  • placeholder: text shown when nothing is written.
  • icon: Icon which will show at the end of the input.
  • iconVariant: in case you are using Font Awesome, which icon variant will be used (like fa-solid or fa-regular).
  • step, max and min: input number's value step, max value and min value.
html
<Card>
    <Form>
        <div class="row">
            <div class="col-12 mb-xs-4">
                <InputNumber
                    name="age"
                    label="Age"
                    placeholder="You must be over 18..."
                    :min="0"
                    :max="50"
                    :step="1"
                    :validations="['not-empty', { name: 'min-value', params: [18] }]"
                />
            </div>
        </div>
    </Form>
</Card>

Emits ​

  • @input. Native event emit.
  • @inputField. Custom event emit.
  • @change. Native change emit.
  • @changeField. Custom change emit.