KRDS Angular

텍스트 입력 필드 Text input ​

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

KRDS 가이드

기본 ​

기본 <input>에 krdsInput을 붙이고 폼 그룹(<krds-form-group>)으로 감싸 레이블과 도움말을 붙입니다. type, placeholder, maxlength, required, readonly, disabled는 기본 속성 그대로 쓰고, 값은 [(ngModel)], formControlName, [formField]로 받습니다.

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

@Component({
  selector: 'demo-input-basic',
  imports: [FormsModule, KrdsFormGroup, KrdsInput],
  template: `
    <div class="fieldset">
      <krds-form-group label="레이블" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" [(ngModel)]="name" />
      </krds-form-group>
      <krds-form-group label="레이블" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" value="readonly" readonly />
      </krds-form-group>
      <krds-form-group label="레이블" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" value="disabled" disabled />
      </krds-form-group>
    </div>
  `
})
export default class InputBasic {
  readonly name = signal('')
}

상태 ​

폼 그룹의 state를 error·success·information으로 지정하면 도움말이 그 상태의 메시지 스타일로 바뀝니다. error일 때는 입력 필드 테두리도 에러 색으로 바뀌고 입력 요소에 aria-invalid="true"가 붙습니다.

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

@Component({
  selector: 'demo-input-states',
  imports: [KrdsFormGroup, KrdsInput],
  template: `
    <div class="fieldset">
      <krds-form-group label="레이블" hint="에러 메시지" state="error">
        <input krdsInput placeholder="플레이스홀더" value="에러" />
      </krds-form-group>
      <krds-form-group label="레이블" hint="성공 메시지" state="success">
        <input krdsInput placeholder="플레이스홀더" value="성공" />
      </krds-form-group>
      <krds-form-group label="레이블" hint="정보 메시지" state="information">
        <input krdsInput placeholder="플레이스홀더" value="정보" />
      </krds-form-group>
    </div>
  `
})
export default class InputStates {}

사이즈 ​

size로 small·medium·large·xlarge 중 하나를 고릅니다. 지정하지 않으면 large 크기입니다.

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

@Component({
  selector: 'demo-input-sizes',
  imports: [KrdsFormGroup, KrdsInput],
  template: `
    <div class="fieldset">
      <krds-form-group label="small" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" size="small" />
      </krds-form-group>
      <krds-form-group label="medium" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" size="medium" />
      </krds-form-group>
      <krds-form-group label="large (기본)" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" size="large" />
      </krds-form-group>
      <krds-form-group label="xlarge" hint="도움말">
        <input krdsInput placeholder="플레이스홀더" size="xlarge" />
      </krds-form-group>
    </div>
  `
})
export default class InputSizes {}

로딩 ​

폼 그룹에 loading을 지정하면 입력 필드 안에 스피너가 표시됩니다.

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

@Component({
  selector: 'demo-input-loading',
  imports: [KrdsFormGroup, KrdsInput],
  template: `
    <div class="fieldset">
      <krds-form-group label="레이블" hint="데이터를 불러오는 중입니다" loading>
        <input krdsInput placeholder="플레이스홀더" />
      </krds-form-group>
      <krds-form-group label="레이블" hint="검증 중입니다" loading>
        <input krdsInput placeholder="플레이스홀더" value="입력된 값" />
      </krds-form-group>
    </div>
  `
})
export default class InputLoading {}

아이콘 버튼 ​

폼 그룹에 withButton을 지정하고 입력 요소 뒤에 버튼을 넣으면 입력 필드 안쪽에 버튼이 배치됩니다. 보이는 텍스트가 없으므로 sr-only 텍스트로 버튼 이름을 제공합니다. 비밀번호 보기 전환이나 내용 삭제 같은 버튼 동작은 컴포넌트가 처리하지 않으므로 직접 구현합니다. 버튼이 여러 개면 <div class="btn-group">으로 묶습니다.

내용 삭제 버튼은 btn-delete-input 클래스를 붙이고 폼 그룹에 deleteButton을 지정하면 값이 있을 때만 보입니다. 값이 비었는지를 CSS(:placeholder-shown)로 판단하므로 입력 요소에 placeholder가 있어야 합니다. 버튼을 누르면 버튼이 사라지므로 초점을 입력 필드로 옮겨 줍니다.

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

@Component({
  selector: 'demo-input-icon-buttons',
  imports: [FormsModule, KrdsButton, KrdsFormGroup, KrdsInput],
  template: `
    <div class="fieldset">
      <!-- 비밀번호 보기 버튼 -->
      <krds-form-group label="비밀번호" withButton>
        <input
          krdsInput
          [type]="showPassword() ? 'text' : 'password'"
          placeholder="8-12자의 영문자, 숫자, 특수문자 조합"
          [(ngModel)]="password"
        />
        <button krdsButton type="button" size="medium" icon (click)="showPassword.set(!showPassword())">
          <span class="sr-only">{{ showPassword() ? '입력한 비밀번호 가리기' : '입력한 비밀번호 보기' }}</span>
          <i class="svg-icon" [class]="showPassword() ? 'ico-pw-visible-on' : 'ico-pw-visible'" aria-hidden="true"></i>
        </button>
      </krds-form-group>

      <!-- 내용 삭제 버튼 (값이 있을 때만 보임) -->
      <krds-form-group label="검색어" withButton deleteButton>
        <input #keywordInput krdsInput placeholder="내용을 입력하세요" [(ngModel)]="keyword" />
        <button krdsButton type="button" size="medium" icon pure class="btn-delete-input" (click)="keyword.set(''); keywordInput.focus()">
          <span class="sr-only">내용 삭제</span>
          <i class="svg-icon ico-delete-fill" aria-hidden="true"></i>
        </button>
      </krds-form-group>

      <!-- 버튼 여러 개 -->
      <krds-form-group label="비밀번호 확인" withButton deleteButton>
        <input
          #confirmInput
          krdsInput
          [type]="showConfirm() ? 'text' : 'password'"
          placeholder="8-12자의 영문자, 숫자, 특수문자 조합"
          [(ngModel)]="confirm"
        />
        <div class="btn-group">
          <button krdsButton type="button" size="medium" icon pure class="btn-delete-input" (click)="confirm.set(''); confirmInput.focus()">
            <span class="sr-only">내용 삭제</span>
            <i class="svg-icon ico-delete-fill" aria-hidden="true"></i>
          </button>
          <button krdsButton type="button" size="medium" icon (click)="showConfirm.set(!showConfirm())">
            <span class="sr-only">{{ showConfirm() ? '입력한 비밀번호 가리기' : '입력한 비밀번호 보기' }}</span>
            <i class="svg-icon" [class]="showConfirm() ? 'ico-pw-visible-on' : 'ico-pw-visible'" aria-hidden="true"></i>
          </button>
        </div>
      </krds-form-group>
    </div>
  `
})
export default class InputIconButtons {
  readonly password = signal('1234567890')
  readonly showPassword = signal(false)
  readonly keyword = signal('')
  readonly confirm = signal('1234567890')
  readonly showConfirm = signal(false)
}

KrdsInput ​

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

Inputs

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

KrdsFormGroup ​

선택자 krds-form-group

Inputs

이름타입기본값설명
labelstring-레이블
hintstring-도움말 (state에 따라 오류·성공·안내 문구)
state'default' | 'error' | 'success' | 'information''default'입력 상태
withButtonbooleanfalse입력 필드 안에 버튼을 둠 (비밀번호 보기·내용 삭제 등)
deleteButtonbooleanfalse값이 있을 때만 내용 삭제 버튼(.btn-delete-input)을 보임
loadingbooleanfalse입력 필드 안에 로딩 스피너 표시 (데이터를 불러오거나 검증하는 중)