Number Input

The inputs are a fundamental part of any project, with HopeKit you can add a number input with a single line of code.

Basic Usage

The inputs have themes: default, transparent.

Default theme

Transparent theme

<template>
  <div class="grid grid-cols-4 gap-6 items-start">
    <HcNumberInput
      v-model="value1"
      label="Default theme"
      placeholder="0"
    />

    <HcNumberInput
      v-model="value2"
      label="Transparent theme"
      placeholder="0"
      theme="transparent"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcNumberInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(0);
const value2 = ref(0);
</script>

Sizes

Number input have text sizes: small, medium. Number input have sizes: small, medium.

Medium text size

Small text size

Medium size

Small size

<template>
  <div class="">
    <div class="grid grid-cols-4 gap-6 items-end">
      <HcNumberInput
        v-model="value1"
        label="Medium text size"
        placeholder="0"
        :max-length="50"
        text-size="medium"
      />

      <HcNumberInput
        v-model="value2"
        label="Small text size"
        placeholder="0"
        :max-length="50"
        text-size="small"
      />
    </div>
    <div class="grid grid-cols-4 gap-6 items-end mt-5">
      <HcNumberInput
        v-model="value3"
        label="Medium size"
        placeholder="0"
        :max-length="50"
        size="medium"
      />

      <HcNumberInput
        v-model="value4"
        label="Small size"
        placeholder="0"
        :max-length="50"
        size="small"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { HcNumberInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(0);
const value2 = ref(0);
const value3 = ref(0);
const value4 = ref(0);
</script>

Disabled & readonly

Change the state of the button to disabled with the disabled property, the property is a boolean so you can add it without any value.

Change the state of the button to readonly with the readonly property.

Disabled

Readonly

<template>
  <div class="grid grid-cols-4 gap-6 items-start">
    <HcNumberInput
      v-model="value1"
      label="Disabled"
      placeholder="0"
      disabled
    />

    <HcNumberInput
      v-model="value2"
      label="Readonly"
      placeholder="0"
      readonly
    />
  </div>
</template>

<script lang="ts" setup>
import { HcNumberInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(0);
const value2 = ref(0);

</script>

Errors

Use props errorMsg to show error message or use prop boolean error to detarmitate error state of the component

Error

Error message

This field is required

Error and disabled

Error and readonly

<template>
  <div>
    <div class="grid grid-cols-4 gap-6 items-start">
      <HcNumberInput
        v-model="value1"
        label="Error"
        placeholder="0"
        error
      />

      <HcNumberInput
        v-model="value2"
        label="Error message"
        placeholder="0"
        error-msg="This field is required"
      />
    </div>

    <div class="grid grid-cols-4 gap-6 items-start mt-5">
      <HcNumberInput
        v-model="value3"
        label="Error and disabled"
        placeholder="0"
        error
        disabled
      />

      <HcNumberInput
        v-model="value4"
        label="Error and readonly"
        placeholder="0"
        error
        readonly
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { HcNumberInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(0);
const value2 = ref(0);
const value3 = ref(0);
const value4 = ref(0);
</script>

Min and max value

Use prop min to determinate min entered value. If user try to enter value less tahn min value than after blur it automatically will changed to min value.

Use prop max to determinate max entered value. If user try to enter value more than max value, ia automatically will changed to max value.

Max value 500

Min value 1

<template>
  <div class="grid grid-cols-4 gap-6 items-start">
    <HcNumberInput
      v-model="value1"
      label="Max value 500"
      placeholder="0"
      :max="500"
    />

    <HcNumberInput
      v-model="value2"
      label="Min value 1"
      placeholder="0"
      success-icon
      :min="1"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcNumberInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(0);
const value2 = ref(1);

</script>

Props

Property	Type	Values	Description	Default
modelValue	Number	Number	binding value	0
label	String	String	label text
placeholder	String	String	placeholder text
max	Number	Number	max modelValue	undefined
min	Number	Number	min modelValue	0
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is read only	false
error	Boolean	Boolean	determine if the component has error and change its style to that state.	false
errorMsg	String	String	error message
size	String	smallmedium	component size	medium
textSize	String	smallmedium	component field text size	small
autoFocus	boolean	truefalse	same as autofocus in native input	false
theme	String	defaulttransparent	Component theme	default
id	String	String	native 'id' attribute

Slots

Property	Type	Values	Description	Default
label-suffix		-	Customize label suffix content

Events

Property	Type	Values	Description
update:model-value	Function	value - number	triggers when the NumberInput value change
input	Function	value - number	triggers when the NumberInput value change
increase	Function	value - number	triggers when click on plus button
decrease	Function	value - number	triggers when click on minus button
blur	Function	value - number	triggers when NumberInput blurs
focus	Function	event - FocusEvent	triggers when NumberInput focuses

Number Input #

Basic Usage #

Sizes #

Disabled & readonly #

Errors #

Min and max value #

Props #

Slots #

Events #