Input

The inputs are a fundamental part of any project, with HopeKit you can add a 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-2 gap-6 items-start">
    <HcInput
      v-model="value1"
      label="Default theme"
      placeholder="Enter something"
    />

    <HcInput
      v-model="value2"
      label="Transparent theme"
      placeholder="Enter something"
      theme="transparent"
    />
  </div>
</template>

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

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

Sizes

The inputs have text sizes: small, medium. The inputs have sizes: small, medium.

Medium text size

Small text size

Medium size

Small size

<template>
  <div class="">
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcInput
        v-model="value1"
        label="Medium text size"
        placeholder="Enter text..."
        text-size="medium"
      />

      <HcInput
        v-model="value2"
        label="Small text size"
        placeholder="Enter text..."
        text-size="small"
      />
    </div>

    <div class="mt-5">
      <HcInput
        v-model="value3"
        label="Medium size"
        placeholder="Enter text..."
        size="medium"
      />

      <HcInput
        v-model="value4"
        label="Small size"
        placeholder="Enter text..."
        size="small"
        class="mt-5"
      />
    </div>
  </div>
</template>

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

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
</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. Use boolean prop lock whether show lock icon when prop disabled is true.

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

Disabled

Disabled and lock

Readonly

<template>
  <div class="grid grid-cols-2 gap-6 items-start">
    <HcInput
      v-model="value1"
      label="Disabled"
      placeholder="Enter text..."
      disabled
    />

    <HcInput
      v-model="value2"
      label="Disabled and lock"
      placeholder="Enter text..."
      disabled
      lock
    />

    <HcInput
      v-model="value3"
      label="Readonly"
      placeholder="Enter text..."
      readonly
    />
  </div>
</template>

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

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
</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 is an error message

Error and disabled

Error and readonly

<template>
  <div>
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcInput
        v-model="value1"
        label="Error"
        placeholder="Enter text..."
        error
      />

      <HcInput
        v-model="value2"
        label="Error message"
        placeholder="Enter text..."
        error-msg="This is an error message"
      />
    </div>

    <div class="grid grid-cols-2 gap-6 items-start mt-5">
      <HcInput
        v-model="value3"
        label="Error and disabled"
        placeholder="Enter text..."
        error
        disabled
      />

      <HcInput
        v-model="value4"
        label="Error and readonly"
        placeholder="Enter text..."
        error
        readonly
      />
    </div>
  </div>
</template>

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

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

States

There are different states: max-length, show-counter, success-icon, clearable, prefix-icon, suffix-icon, show-eye, maska.

Max length

Show success icon

Clearable

Prefix Icon

Show eye

Maska

<template>
  <div class="">
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcInput
        v-model="value1"
        label="Max length"
        placeholder="Enter text..."
        :max-length="50"
      />

      <HcInput
        v-model="value2"
        label="Show success icon"
        placeholder="Enter text..."
        success-icon
      />
    </div>

    <div class="grid grid-cols-2 gap-6 items-start mt-5">
      <HcInput
        v-model="value3"
        label="Clearable"
        placeholder="Enter text..."
        clearable
      />

      <HcInput
        v-model="value4"
        label="Prefix Icon"
        placeholder="Enter text..."
        prefix-icon="search"
      />
    </div>

    <div class="grid grid-cols-2 gap-6 items-start mt-5">
      <HcInput
        v-model="value5"
        label="Show eye"
        placeholder="Enter text..."
        type="password"
        show-eye
      />

      <HcInput
        v-model="value6"
        label="Maska"
        placeholder="##:##:##"
        maska="##:##:##"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { HcInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const value5 = ref('');
const value6 = ref('');
</script>

Props

Property	Type	Values	Description	Default
modelValue	String	String	binding value	false
label	String	String	label text
placeholder	String	String	placeholder text
maxLength	Number	Number	max count of the symbols	undefined
showCounter	Boolean	Boolean	show symbols length counter	true
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
successIcon	boolean	truefalse	whether show successIcon	false
clearable	boolean	truefalse	whether show clearable button	false
prefixIcon	String	String	prefix input icon	false
showEye	boolean	truefalse	whether show showEye icon	false
size	String	smallmedium	component size	medium
textSize	String	smallmedium	component field text size	small
lock	boolean	truefalse	whether show lock icon when disabled	false
autoFocus	boolean	truefalse	same as autofocus in native input	false
maska	String	String	input maska	text
theme	String	defaulttransparent	component theme	default
autocomplete	Boolean	Boolean	same as autocomplete in native input	false
type	String	stringnumber	native 'type' attribute	text
id	String	String	native 'id' attribute
name	String	String	native 'name' attribute

Slots

Property	Values	Description
prefix	-	customize prefix icon content
label-suffix	-	customize label suffix content
suffix	-	customize suffix icon content

Events

Property	Type	Values	Description
update:model-value	Function	value - string	triggers when the Input value change
keydown-enter	Function	event - KeyboardEvent	triggers when press enter
clear	Function	-	triggers when click on clear icon
focus	Function	event - FocusEvent	triggers when Input focuses
blur	Function	value - string	triggers when Input blurs
input	Function	value - string	triggers when the Input value change

Input #

Basic Usage #

Sizes #

Disabled & readonly #

Errors #

States #

Props #

Slots #

Events #