Textarea

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

Basic Usage

The textarea have themes: default, transparent.

<template>
  <ClientOnly>
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcTextarea
        v-model="value1"
        label="Default theme"
        placeholder="Enter something"
      />

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

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

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

Sizes

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

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

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

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

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

<script lang="ts" setup>
import { HcTextarea } 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.

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

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

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

<script lang="ts" setup>
import { HcTextarea } 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

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

        <HcTextarea
          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">
        <HcTextarea
          v-model="value3"
          label="Error and disabled"
          placeholder="Enter text..."
          error
          disabled
        />

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

<script lang="ts" setup>
import { HcTextarea } 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, new-line-ctrl-enter, hide-scroll, line-break.

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

        <HcTextarea
          v-model="value2"
          label="Hide scroll"
          placeholder="Enter text..."
          hide-scroll
        />
      </div>

      <div class="grid grid-cols-2 gap-6 items-start mt-5">
        <HcTextarea
          v-model="value3"
          label="Deny line break"
          placeholder="Enter text..."
          :line-break="false"
        />

        <HcTextarea
          v-model="value4"
          label="New line only with Ctrl + Enter"
          placeholder="Enter text..."
          new-line-ctrl-enter
        />
      </div>
    </div>
  </ClientOnly>
</template>
<script lang="ts" setup>
import { HcTextarea } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

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

Props

Property	Type	Values	Description	Default
modelValue	String	String	binding value	false
id	String	String	native 'id' attribute
label	String	String	label text
placeholder	String	String	placeholder text
rows	Number	Number	count of the rows	3
maxLength	Number	Number	max count of the symbols	undefined
error	Boolean	Boolean	determine if the component has error and change its style to that state.	false
errorMsg	String	String	error message
disabled	Boolean	Boolean	whether component is disabled	false
lock	boolean	truefalse	whether show lock icon when disabled	false
readonly	Boolean	Boolean	whether component is read only	false
size	String	smallmedium	component size	medium
textSize	String	smallmedium	component field text size	small
autosize	Boolean	Boolean	whether textarea has an adaptive height	true
lineBreak	boolean	truefalse	allow line break	true
newLineCtrlEnter	boolean	truefalse	whether allow can make new line only with keys Ctrl + Enter	false
autofocus	boolean	truefalse	same as autofocus in native textarea	false
theme	String	defaulttransparent	theme of the component	default
hideScroll	boolean	truefalse	hide scroll in textarea component	false

Slots

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

Events

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

Textarea #

Basic Usage #

Sizes #

Disabled & readonly #

Errors #

States #

Props #

Slots #

Events #