HopeKitAppearance
ContenteditableInput
Expanding input
Basic Usage
Set prop label, placeholder, size to determinate view of component
<template>
<div class="">
<HcContenteditableInput
v-model="value1"
label="Default size"
placeholder="Enter something"
/>
<HcContenteditableInput
v-model="value2"
label="Overline size"
placeholder="Enter something"
class="mt-10"
size="overline"
/>
<HcContenteditableInput
v-model="value3"
label="Heading size"
placeholder="Enter something"
class="mt-10"
size="heading"
/>
</div>
</template>
<script lang="ts" setup>
import { HcContenteditableInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
</script>
Max length
Use prop maxLength to set max symbols length. Use prop showCounter to determine whether to show the counter or not
0 / 50
<template>
<div class="">
<HcContenteditableInput
v-model="value1"
label="Show counter"
placeholder="Enter something"
:max-length="50"
/>
<HcContenteditableInput
v-model="value2"
label="Hide counter"
placeholder="Enter something"
class="mt-10"
:max-length="50"
:show-counter="false"
/>
</div>
</template>
<script lang="ts" setup>
import { HcContenteditableInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
</script>
Disabled & readonly
Set prop disabled or readonly to determinate state of component
0 / 50
0 / 50
<template>
<div class="">
<HcContenteditableInput
v-model="value1"
label="Disabled"
placeholder="Enter something"
:max-length="50"
disabled
/>
<HcContenteditableInput
v-model="value2"
label="Readonly"
placeholder="Enter something"
class="mt-10"
:max-length="50"
readonly
/>
</div>
</template>
<script lang="ts" setup>
import { HcContenteditableInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
</script>
Error message
Add Boolean prop errorMsg for show error state
0 / 50
This field is required
0 / 50
This field is required
0 / 50
This field is required
<template>
<div class="">
<HcContenteditableInput
v-model="value1"
label="Error"
placeholder="Enter something"
:max-length="50"
error
error-msg="This field is required"
/>
<HcContenteditableInput
v-model="value2"
label="Error and disabled"
placeholder="Enter something"
class="mt-10"
:max-length="50"
error
disabled
error-msg="This field is required"
/>
<HcContenteditableInput
v-model="value3"
label="Error and readonly"
placeholder="Enter something"
class="mt-10"
:max-length="50"
error
readonly
error-msg="This field is required"
/>
</div>
</template>
<script lang="ts" setup>
import { HcContenteditableInput } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = 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 |
| size | String | overlineheadingdefault | component size | default |
| disabled | Boolean | Boolean | whether component is disabled | false |
| readonly | Boolean | Boolean | whether component is read only | false |
| customClass | String | String | custom input class | |
| tag | String | divph1h2h3h4 | tag of input component | div |
| errorMsg | String | String | error message |
Slots
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| label-suffix | - | customize label suffix content |
Events
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| input | Function | value - string | triggers when the Input value change | |
| blur | Function | value - string | triggers when Input blurs | |
| update:model-value | Function | value - string | triggers when the Input value change |