폼 그룹 Form group

KrdsFormGroup은 입력 컴포넌트 하나와 그 레이블·도움말을 묶는 .form-group 영역입니다. KrdsFormLabel은 레이블(.form-tit 안의 <label>), KrdsFormHint는 입력 필드 아래의 도움말(<p>)을 만듭니다. 텍스트 입력 필드, 텍스트 영역, 셀렉트, 날짜 입력 필드 등과 함께 씁니다.

기본

KrdsFormLabel의 for에 입력 컴포넌트의 id를 지정해 레이블을 연결합니다.

이메일

알림을 받을 이메일 주소를 입력해 주세요

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

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

<template>
  <KrdsFormGroup>
    <KrdsFormLabel for="form-group-email">이메일</KrdsFormLabel>
    <KrdsInput id="form-group-email" v-model="email" type="email" placeholder="example@korea.kr" />
    <KrdsFormHint>알림을 받을 이메일 주소를 입력해 주세요</KrdsFormHint>
  </KrdsFormGroup>
</template>

도움말 유형

KrdsFormHint의 type을 error·success·information으로 지정하면 각각 에러·성공·정보 메시지 스타일로 표시됩니다(기본값 hint). 입력 컴포넌트의 상태(state)와 같은 값으로 맞춥니다.

레이블

도움말

레이블

에러 메시지

레이블

성공 메시지

레이블

정보 메시지

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

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="form-group-hint">레이블</KrdsFormLabel>
      <KrdsInput id="form-group-hint" placeholder="플레이스홀더" />
      <KrdsFormHint>도움말</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="form-group-error">레이블</KrdsFormLabel>
      <KrdsInput id="form-group-error" model-value="에러" state="error" />
      <KrdsFormHint type="error">에러 메시지</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="form-group-success">레이블</KrdsFormLabel>
      <KrdsInput id="form-group-success" model-value="성공" state="success" />
      <KrdsFormHint type="success">성공 메시지</KrdsFormHint>
    </KrdsFormGroup>

    <KrdsFormGroup>
      <KrdsFormLabel for="form-group-information">레이블</KrdsFormLabel>
      <KrdsInput id="form-group-information" model-value="정보" state="information" />
      <KrdsFormHint type="information">정보 메시지</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

KrdsFormGroup

Props

이름	타입	기본값	설명
class	KrdsClassValue	-	CSS 클래스
style	string | Record<string, any>	-	인라인 스타일
id	string	-	HTML ID

Slots

이름	설명
default	레이블·입력 요소·도움말

KrdsFormLabel

Props

이름	타입	기본값	설명
class	KrdsClassValue	-	CSS 클래스
style	string | Record<string, any>	-	인라인 스타일
id	string	-	HTML ID
for	string	-	label의 for 속성

Events

이름	인자	설명
click	[event: MouseEvent]	레이블을 클릭했을 때

Slots

이름	설명
default	레이블 문구

KrdsFormHint

Props

이름	타입	기본값	설명
class	KrdsClassValue	-	CSS 클래스
type	"error" | "success" | "information" | "hint"	'hint'	힌트 타입
style	string | Record<string, any>	-	인라인 스타일
id	string	-	HTML ID

Events

이름	인자	설명
click	[event: MouseEvent]	도움말 문구를 클릭했을 때

Slots

이름	설명
default	도움말 문구