텍스트 영역 Textarea

텍스트 영역은 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 여러 줄의 텍스트를 입력하는 경우에 사용하는 요소이다.

KRDS 가이드

기본

입력한 글자 수가 오른쪽 아래에 표시됩니다(showCount, 기본값 true). maxlength를 지정하면 최대 글자 수도 함께 표시됩니다.

레이블

0

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFormGroup, KrdsFormLabel, KrdsTextarea } from '@krds.ui/vue'

  const content = ref('')
</script>

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="textarea1">레이블</KrdsFormLabel>
      <KrdsTextarea id="textarea1" v-model="content" placeholder="내용을 입력하세요" />
    </KrdsFormGroup>
  </div>
</template>

KrdsTextarea

Props

이름	타입	기본값	설명
class	KrdsClassValue	-	CSS 클래스
name	string	-	폼 필드 이름
resize	"none" | "vertical" | "both" | "horizontal"	'vertical'	리사이즈 가능 여부
id	string	-	HTML ID
required	boolean	false	필수 입력 여부
disabled	boolean	false	비활성화 여부
size	Size	-	입력 크기
modelValue	string	''	입력값
placeholder	string	-	플레이스홀더
readonly	boolean	false	읽기 전용 여부
autofocus	boolean	false	자동 포커스
maxlength	number	-	최대 글자 수
minlength	number	-	최소 글자 수
rows	number	4	행 수
cols	number	-	열 수
showCount	boolean	true	글자 수 표시 여부

Events

이름	인자	설명
input	[event: Event]	입력할 때 (네이티브 input)
blur	[event: FocusEvent]	초점을 잃었을 때
change	[event: Event]	값이 확정됐을 때 (네이티브 change)
focus	[event: FocusEvent]	초점을 받았을 때
keydown	[event: KeyboardEvent]	키를 눌렀을 때
keyup	[event: KeyboardEvent]	키를 뗐을 때
update:modelValue	[value: string]	입력값이 바뀔 때 (v-model)