텍스트 입력 상태

<div class="fieldset">
	
	<div class="form-group">
		<div class="form-tit">
			<label for="consult_name21">레이블</label>
		</div>
		<div class="form-conts is-error">
			<input type="text" id="consult_name21" class="krds-input" placeholder="플레이스홀더" value="에러">
		</div>
		<p class="form-hint-invalid">에러 메시지</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="consult_name22">레이블</label>
		</div>
		<div class="form-conts is-success">
			<input type="text" id="consult_name22" class="krds-input" placeholder="플레이스홀더" value="성공">
		</div>
		<p class="form-hint-success">성공 메시지</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="consult_name23">레이블</label>
		</div>
		<div class="form-conts is-information">
			<input type="text" id="consult_name23" class="krds-input" placeholder="플레이스홀더" value="정보">
		</div>
		<p class="form-hint-information">정보 메시지</p>
	</div>
	
</div>

<template>
  <div class="fieldset">
	
	<div class="form-group">
		<div class="form-tit">
			<label for="consult_name21">레이블</label>
		</div>
		<div class="form-conts is-error">
			<input type="text" id="consult_name21" class="krds-input" placeholder="플레이스홀더" value="에러">
		</div>
		<p class="form-hint-invalid">에러 메시지</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="consult_name22">레이블</label>
		</div>
		<div class="form-conts is-success">
			<input type="text" id="consult_name22" class="krds-input" placeholder="플레이스홀더" value="성공">
		</div>
		<p class="form-hint-success">성공 메시지</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="consult_name23">레이블</label>
		</div>
		<div class="form-conts is-information">
			<input type="text" id="consult_name23" class="krds-input" placeholder="플레이스홀더" value="정보">
		</div>
		<p class="form-hint-information">정보 메시지</p>
	</div>
	
</div>
</template>

<script setup lang="ts">
// 텍스트 입력 상태 컴포넌트
// 다양한 상태의 텍스트 입력 필드입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>