KRDS Angular

텍스트 영역 Textarea ​

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

KRDS 가이드

기본 ​

기본 <textarea>에 krdsInput을 붙입니다. 텍스트 입력 필드와 같은 디렉티브라 폼 그룹 안에서 레이블·도움말이 연결되고, 값은 [(ngModel)], formControlName, [formField]로 받습니다.

글자 수를 표시하려면 <krds-textarea>로 감싸고 현재 글자 수를 count로 넘깁니다. max를 주면 최대 글자 수도 함께 표시됩니다. max는 표시만 하므로 입력 제한은 maxlength로 겁니다. 글자 수 표시가 필요 없으면 <krds-textarea> 없이 <textarea krdsInput>만 씁니다.

KRDS 스타일은 텍스트 영역의 크기 조절을 막아 둡니다(resize: none). 사용자가 높이를 조절하게 하려면 style="resize: vertical"처럼 직접 지정합니다.

ts
import { Component, signal } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { KrdsFormGroup, KrdsInput, KrdsTextarea } from '@krds.ui/angular'

@Component({
  selector: 'demo-textarea-basic',
  imports: [FormsModule, KrdsFormGroup, KrdsInput, KrdsTextarea],
  template: `
    <div class="fieldset">
      <krds-form-group label="문의 내용">
        <krds-textarea [count]="content().length" [max]="500">
          <textarea krdsInput placeholder="내용을 입력하세요" maxlength="500" style="resize: vertical" [(ngModel)]="content"></textarea>
        </krds-textarea>
      </krds-form-group>
      <krds-form-group label="비고" hint="글자 수 표시 없이 기본 textarea만 쓸 수도 있습니다">
        <textarea krdsInput placeholder="내용을 입력하세요"></textarea>
      </krds-form-group>
    </div>
  `
})
export default class TextareaBasic {
  readonly content = signal('')
}

KrdsTextarea ​

선택자 krds-textarea

Inputs

이름타입기본값설명
countnumber-현재 글자 수 (지정하면 글자 수 표시)
maxnumber-최대 글자 수

KrdsInput ​

선택자 input[krdsInput], textarea[krdsInput]

Inputs

이름타입기본값설명
size'small' | 'medium' | 'large' | 'xlarge'-크기
idstring`krds-control-${nextId++}`요소 id (없으면 자동 생성)