InputTextarea

• InputTextarea 는 여러 줄의 텍스트를 입력하기 위한 컴포넌트입니다.
• InputText 와 동일한 디자인 시스템/상태 클래스를 사용하며, 태그만 <textarea> 로 구현된 버전입니다.

Basic

<script setup lang="ts">
import { ref } from 'vue';
import { InputTextarea } from '@jennifersoft/vue-components-v2';

const basicValue = ref('');
</script>

<template>
    <InputTextarea
        v-model="basicValue"
        class="w-full"
        placeholder="Enter multi-line text"
    />
</template>

Props

Prop	타입	필수	기본값	설명
modelValue	string	-	''	입력 값
invalid	boolean	-	false	유효성 오류 스타일 표시
readonly	boolean	-	false	읽기 전용
required	boolean	-	false	필수 상태 표시
placeholder	string	-	''	플레이스홀더 텍스트
size	'large' | 'medium' | 'small'	-	-	입력 크기
disabled	boolean	-	false	비활성화 여부
autoResize	boolean	-	false	내용에 따라 높이 자동 조절 (true일 때 수동 resize 비활성화)
autoResize	boolean	-	false	내용에 따라 높이 자동 조절

• size, invalid, readonly, required, disabled 등에 따른 시각적 상태는 InputText 와 동일합니다.

Resize & rows

• InputTextarea 는 기본적으로 CSS 로 높이를 제어합니다.
  • min-height가 설정되어 있고, resize: vertical 상태입니다.
• autoResize props 를 true 로 주면 내용 길이에 따라 높이를 자동으로 조절하며, 이때는 브라우저의 수동 resize 핸들은 표시되지 않습니다.
• 수동 resize 를 허용하고 싶다면 autoResize 를 사용하지 않고 기본 동작( resize: vertical )을 그대로 사용하면 됩니다.

첫 줄 두 번째 줄 세 번째 줄

<script setup lang="ts">
import { ref } from 'vue';
import { InputTextarea } from '@jennifersoft/vue-components-v2';

const autoResizeText = ref('첫 줄\n두 번째 줄\n세 번째 줄');
</script>

<template>
    <div class="flex flex-col gap-4 w-[640px]">
        <!-- autoResize true: 내용에 맞게 높이 자동 조절 -->
        <InputTextarea
            v-model="autoResizeText"
            class="w-full"
            auto-resize
            placeholder="멀티라인 텍스트를 입력하면 높이가 자동으로 늘어납니다."
        />
    </div>
</template>

States

inactive

requiredrequired text

readonlyreadonly text

invalidinvalid text

disableddisabled text

<script setup lang="ts">
import { ref } from 'vue';
import { InputTextarea } from '@jennifersoft/vue-components-v2';

const basicValue = ref('');
const requiredValue = ref('required text');
const readonlyValue = ref('readonly text');
const invalidValue = ref('invalid text');
const disabledValue = ref('disabled text');
</script>

<template>
    <div class="flex flex-col gap-4 w-[640px]">
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">inactive</label>
            <InputTextarea
                v-model="basicValue"
                class="w-full"
                placeholder="Enter description"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">required</label>
            <InputTextarea
                v-model="requiredValue"
                class="w-full"
                :required="true"
                placeholder="Required textarea"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">readonly</label>
            <InputTextarea
                v-model="readonlyValue"
                class="w-full"
                :readonly="true"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">invalid</label>
            <InputTextarea
                v-model="invalidValue"
                class="w-full"
                :invalid="true"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">disabled</label>
            <InputTextarea
                v-model="disabledValue"
                class="w-full"
                :disabled="true"
            />
        </div>
    </div>
</template>