텍스트 입력 필드 Text input

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

KRDS 가이드

기본

KrdsFormGroup·KrdsFormLabel·KrdsFormHint와 함께 써서 레이블과 도움말을 붙입니다. readonly·disabled로 읽기 전용과 비활성화 상태를 만듭니다.

레이블

도움말

레이블

도움말

레이블

도움말

vue

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

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

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name" v-model="name" placeholder="플레이스홀더" />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name2">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name2" placeholder="플레이스홀더" model-value="readonly" readonly />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name3">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name3" placeholder="플레이스홀더" model-value="disabled" disabled />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

상태

state를 error·success·information으로 지정하고 아래 KrdsFormHint의 type도 같은 값으로 맞춥니다. error일 때는 입력 필드 테두리도 에러 색으로 바뀝니다.

레이블

에러 메시지

레이블

성공 메시지

레이블

정보 메시지

vue

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

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name21">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name21" placeholder="플레이스홀더" model-value="에러" state="error" />
      <KrdsFormHint type="error">에러 메시지</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name22">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name22" placeholder="플레이스홀더" model-value="성공" state="success" />
      <KrdsFormHint type="success">성공 메시지</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name23">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name23" placeholder="플레이스홀더" model-value="정보" state="information" />
      <KrdsFormHint type="information">정보 메시지</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

사이즈

레이블

도움말

레이블

도움말

레이블

도움말

vue

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

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name31">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name31" placeholder="플레이스홀더" size="small" />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name32">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name32" placeholder="플레이스홀더" size="medium" />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="consult_name33">레이블</KrdsFormLabel>
      <KrdsInput id="consult_name33" placeholder="플레이스홀더" size="large" />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

로딩

loading을 지정하면 입력 필드 안에 스피너가 표시됩니다. 이때 기본 슬롯(아이콘 버튼)은 렌더링되지 않습니다.

레이블

데이터를 불러오는 중입니다

레이블

검증 중입니다

vue

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

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="loading_input">레이블</KrdsFormLabel>
      <KrdsInput id="loading_input" placeholder="플레이스홀더" loading />
      <KrdsFormHint>데이터를 불러오는 중입니다</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="loading_input2">레이블</KrdsFormLabel>
      <KrdsInput id="loading_input2" placeholder="플레이스홀더" model-value="입력된 값" loading />
      <KrdsFormHint>검증 중입니다</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

아이콘 버튼

icon을 지정하고 기본 슬롯에 버튼을 넣으면 입력 필드 안쪽에 버튼이 배치됩니다. 보이는 텍스트가 없으므로 sr-only 텍스트로 버튼 이름을 제공합니다. 비밀번호 보기 전환이나 내용 삭제 같은 버튼 동작은 컴포넌트가 처리하지 않으므로 직접 구현합니다. 버튼이 여러 개면 KrdsButtonGroup으로 묶습니다 (KRDS .btn-group, 입력 필드 안 전용).

레이블

vue

<script setup lang="ts">
  import { KrdsButton, KrdsButtonGroup, KrdsFormGroup, KrdsFormLabel, KrdsIcon, KrdsInput } from '@krds.ui/vue'
</script>

<template>
  <div class="fieldset">
    <!-- 패스워드 보기 버튼 (숨김) -->
    <KrdsFormGroup>
      <KrdsFormLabel for="login_pw">레이블</KrdsFormLabel>
      <KrdsInput id="login_pw" type="password" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" model-value="1234567890" icon>
        <KrdsButton type="button" size="medium" icon>
          <span class="sr-only">입력한 비밀번호 보기</span>
          <KrdsIcon name="ico-pw-visible" />
        </KrdsButton>
      </KrdsInput>
    </KrdsFormGroup>

    <!-- 패스워드 보기 버튼 (보임) -->
    <KrdsFormGroup>
      <KrdsFormLabel for="login_pw2">레이블</KrdsFormLabel>
      <KrdsInput id="login_pw2" type="text" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" model-value="1234567890" icon>
        <KrdsButton type="button" size="medium" icon>
          <span class="sr-only">입력한 비밀번호 가리기</span>
          <KrdsIcon name="ico-pw-visible-on" />
        </KrdsButton>
      </KrdsInput>
    </KrdsFormGroup>

    <!-- 삭제 버튼 -->
    <KrdsFormGroup>
      <KrdsFormLabel for="form_delete">레이블</KrdsFormLabel>
      <KrdsInput id="form_delete" placeholder="내용을 입력하세요" icon data-delete="true">
        <KrdsButton type="button" size="medium" icon pure class="btn-delete-input">
          <span class="sr-only">내용 삭제</span>
          <KrdsIcon name="ico-delete-fill" />
        </KrdsButton>
      </KrdsInput>
    </KrdsFormGroup>

    <!-- 다중 버튼 -->
    <KrdsFormGroup>
      <KrdsFormLabel for="form_btn_multiple">레이블</KrdsFormLabel>
      <KrdsInput
        id="form_btn_multiple"
        type="password"
        placeholder="8-12자의 영문자, 숫자, 특수문자 조합"
        model-value="1234567890"
        icon
        data-delete="true"
      >
        <KrdsButtonGroup>
          <KrdsButton type="button" size="medium" icon pure class="btn-delete-input">
            <span class="sr-only">내용 삭제</span>
            <KrdsIcon name="ico-delete-fill" />
          </KrdsButton>
          <KrdsButton type="button" size="medium" icon>
            <span class="sr-only">입력한 비밀번호 보기</span>
            <KrdsIcon name="ico-pw-visible" />
          </KrdsButton>
        </KrdsButtonGroup>
      </KrdsInput>
    </KrdsFormGroup>
  </div>
</template>

KrdsInput

Props

이름	타입	기본값	설명
`class`	`KrdsClassValue`	-	CSS 클래스
`type`	`InputType`	`'text'`	입력 타입
`name`	`string`	-	폼 필드 이름
`id`	`string`	-	HTML ID
`required`	`boolean`	`false`	필수 입력 여부
`disabled`	`boolean`	`false`	비활성화 여부
`size`	`Size`	-	입력 크기
`icon`	`boolean`	`false`	아이콘 (있을 때 btn-ico-wrap 클래스 적용)
`modelValue`	`string \| number`	-	입력값
`placeholder`	`string`	-	플레이스홀더
`readonly`	`boolean`	`false`	읽기 전용 여부
`autofocus`	`boolean`	`false`	자동 포커스
`loading`	`boolean`	`false`	로딩 상태
`maxlength`	`number`	-	최대 글자 수
`minlength`	`number`	-	최소 글자 수
`max`	`number`	-	최대값 (number 타입용)
`min`	`number`	-	최소값 (number 타입용)
`step`	`number`	-	단계값 (number 타입용)
`autocomplete`	`string`	-	자동완성
`state`	`"default" \| "error" \| "success" \| "information"`	`'default'`	입력 상태

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 \| number]`	입력값이 바뀔 때 (v-model)

Slots

이름	설명
`default`	입력 필드 안쪽 버튼 (icon 속성과 함께, 여러 개면 KrdsButtonGroup)

KrdsButtonGroup

Props

없음

Slots

이름	설명
`default`	입력 필드 안에 넣을 버튼들

텍스트 입력 필드 Text input ​

기본 ​

상태 ​

사이즈 ​

로딩 ​

아이콘 버튼 ​

KrdsInput ​

Props

Events

Slots

KrdsButtonGroup ​

Props

Slots

텍스트 입력 필드 Text input

기본

상태

사이즈

로딩

아이콘 버튼

KrdsInput

KrdsButtonGroup