Input Number

The input element with formatting and manipulating numbers.

Examples

Input Number

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  number: null
})
</script>

<template>
  <form @submit.prevent="">
    <base-input-number v-model="form.number" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  number1: null,
  number2: null
})
</script>

<template>
  <form @submit.prevent="">
    <base-input-number
      v-model="form.number1"
      label="Label"
      layout="horizontal"
      description="Horizontal Layout"
    />
    <base-input-number
      v-model="form.number2"
      label="Label"
      layout="vertical"
      description="Vertical Layout"
    />
  </form>
</template>

Border

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  number1: null,
  number2: null,
  number3: null
})
</script>

<template>
  <form @submit.prevent="">
    <base-input-number v-model="form.number1" label="Without Border" border="none" />
    <base-input-number v-model="form.number2" label="Simple Border" border="simple" />
    <base-input-number v-model="form.number3" label="Full Border" border="full" />
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  number1: 0,
  number2: 0,
  number3: 0,
  number4: 0,
  number5: 0,
  number6: 10000
})

const errors = ref(['Error example'])
</script>

<template>
  <form @submit.prevent="">
    <base-input-number v-model="form.number1" label="Label" required />
    <base-input-number v-model="form.number2" label="Label" placeholder="Placeholder example" />
    <base-input-number v-model="form.number3" label="Label" description="Description example" />
    <base-input-number v-model="form.number4" label="Label" :helpers="['Helper example']" />
    <base-input-number v-model="form.number5" label="Label" v-model:errors="errors" />
    <base-input-number v-model="form.number6" label="Label" disabled />
  </form>
</template>

Input Number API

Types

export type BaseInputNumberBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = `horizontal` `vertical`

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
label	string		Input label.
description	string		Input description.
align	left right	right	Input align.
border	BaseInputNumberBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
decimalLength	number	0	Input decimal length.
required	boolean	false	if true input is required.
helpers	string[]		Input helper message.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-input-number> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I type "15000" into "price"

Step Definition

When('I type {string} into {string}', (value: string, selector: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

Code Implementation

<script setup>
import { ref } from 'vue'

const price = ref()
</script>

<template>
  <base-input-number v-model="price" data-testid="price" />
</template>